انجام پروژه react
یخوانید

    پیش‌نیازها
    گام اول: ایجاد پروژه جدید Vite
    گام دوم: راه‌اندازی سرور توسعه
    گام سوم: پیش‌نمایش برنامه با استفاده از تلفن‌همراه
    گام چهارم: حذف بویلرپلیت پیش‌فرض Vite
    گام پنجم: ساخت برنامه جدید
    گام ششم: گرفتن Build برای تولید نهایی
    جمع‌بندی
    سؤالات متداول

شما معمولاً می‌توانید از Create React برای ایجاد پروژه جدید React بهره ببرید؛ اما برای استفاده از این ابزار باید حدود ۱۴۰ مگابایت Dependency دانلود کنید که ممکن است کمی زمان‌بر باشد. Vite یکی از ابزارهای جدیدی است که می‌تواند جایگزین Create React شود. این ابزار کاملاً سبک است و تنها ۳۱ مگابایت Dependency دارد که صرفه‌جویی در زمان شروع پروژه جدید را در پی دارد.

همچنین، Vite از ماژول‌ ECMAScript استفاده می‌کند و این یعنی پس از تغییر هر فایل به بازسازی کل بسته نرم‌افزاری نیازی نیست. همه این عوامل باعث می‌شوند تا بتوانید با استفاده از Vite خیلی سریع‌تر پروژه React را انجام دهید. در این مقاله از بلاگ پارس پک، می‌خواهیم نحوه انجام پروژه واقعی React با Vite را به شما آموزش دهیم؛ پس تا پایان با ما همراه باشید.
پیش‌نیازها

برای اینکه بتوانید از این مقاله آموزشی بیشترین بهره را ببرید، به این پیش‌نیازها احتیاج دارید:

    Node.js نسخه 12.2.0 را روی سیستم خود نصب کنید.
    پکیج منیجر Yarn نسخه 1.22.0 را روی سیستمتان نصب کنید. ناگفته نماند با نحوه گردش کار Yarn Package Manager نیز باید آشنایی مقدماتی داشته باشید.
    آشنایی با HTML و CSS و JS از دیگر پیش‌نیازها برای استفاده از React.js است.
    آشنایی اولیه با کدهای React.js برای استفاده حداکثری از این مقاله آموزشی لازم است.
    به تلفن‌همراه متصل به اینترنت نیاز دارید تا با استفاده از آن کدهایی که در این مقاله می‌نویسید، بتوانید ببینید.

خرید سرور ابری پارس پک
گام اول: ایجاد پروژه جدید Vite

در مرحله اول، با استفاده از خط فرمان Vite پروژه جدید React.js را ایجاد خواهیم کرد. همچنین، فراموش نکنید که برای نصب و اجرای اسکریپت‌ها، از Yarn Package Manager استفاده خواهیم کرد.

برای ایجاد پروژه جدید React.js، دستور زیر را در ترمینال خود اجرا کنید:
yarn create vite

با اجرای این دستور، فایل اجرایی Vite از ریپوزیتوری npm اجرا و ابزارهای لازم برای ایجاد محیط توسعه React پیکربندی و منو خط فرمان برای تنظیمات پروژه و نوع زبان فعال خواهد شد.

پس از اتمام اسکریپت، از شما خواسته می‌شود تا نام پروژه را وارد کنید. این موضوع در شکل زیر نشان داده شده است:
Output
yarn create v1.۲۲.۱۰
[۱/۴] Resolving packages...
[۲/۴] Fetching packages...
[۳/۴] Linking dependencies...
[۴/۴] Building fresh packages...
success Installed "create-vite@2.9.0" with binaries:
      - create-vite
      - cva
? Project name: » vite-project

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com


نام پروژه را وارد کنید. برای مثال، ما نام digital-ocean-vite را به‌عنوان نام پروژه خود انتخاب کرده‌ایم:
digital-ocean-vite

بعد از انتخاب نام برای پروژه، Vite از شما می‌خواهد تا فریم‌ورک مدنظرتان را برگزینید:
Output
? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
    vue
>   react
    preact
    lit
    svelte

در‌حال‌حاضر، Vite از فریم‌ورک‌های متنوعی مانند React ،Preact ،Vue ،Lit و Svelte پشتیبانی می‌کند. بااین‌حال در این مقاله آموزشی، می‌خواهیم از فریم‌ورک React.js استفاده کنیم؛ بنابراین، فلش قرار‌گرفته در این صفحه را روی React قرار دهید و آن را انتخاب کنید.
Vite چیست؟

ایجاد پروژه React با Vite چگونه است؟

پس از انتخاب فریم‌ورک، Vite از شما می‌خواهد تا زبان مدنظر خود را نیز انتخاب کنید. برای کار روی این پروژه آموزشی، هم می‌توانید از JavaScript و هم از TypeScript استفاده کنید.

حالا از کلیدهای جهت‌دار استفاده و React را انتخاب کنید:
Output
? Select a variant: » - Use arrow-keys. Return to submit.
>   react
    react-ts

بعد از Setup فریم‌ورک، خروجی‌ای به شما نشان داده خواهد شد که حاکی از پیکربندی صحیح پروژه است. پس‌از‌آن، Vite از شما می‌خواهد تا Dependencyهای موردنیاز را با استفاده از Yarn نصب کنید:
Output
Done:
Scaffolding project in path\to\digital-ocean-vite...
Done. Now run:
  cd digital-ocean-vite
  yarn
  yarn dev
Done in ۱۲۹.۸۹s.

با استفاده از کدهای زیر، به پوشه پروژه خود بروید:
cd digital-ocean-vite

سپس، از کدهای زیر استفاده کنید تا از‌طریق Yarn، دِپندِسی‌های پروژه را نصب کنید:
yarn

بعد از نصب موفق Dependencyها، مدت‌زمان صرف‌شده برای نصب در قالب پیغام به شما نشان داده خواهد شد:
Output
success Saved lockfile.
Done in ۴۳.۲۶s.

بدین‌ترتیب، شما توانستید گام اول را با موفقیت پشت‌سر بگذارید. در این مرحله، پروژه جدید Vite را ایجاد و بسته‌های موردنیاز React و نیز Vite را نصب کرده‌اید. در گام بعدی، توسعه سرور را برای آزمایش برنامه انجام خواهید داد.
گام دوم: راه‌اندازی سرور توسعه

برای کنترل کدهای نوشته‌شده، به سرور توسعه نیز نیاز دارید. در این مرحله، نحوه راه‌اندازی این سرور را خواهید آموخت.

برای انجام این کار، از کدهای زیر در پوشه digital-ocean-vite استفاده کنید:
yarn run dev

با استفاده از این دستور، پروژه شما در حالت Development Mode اجرا خواهد شد و شما خروجی زیر را خواهید دید:
Output
 vite v2.۹.۱ dev server running at:
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
  ready in 910ms.

حالا مرورگر خود را باز و آدرس http://localhost:3000/. را وارد کنید. شما باید بتوانید پروژه استاندارد React را روی پورت ۳۰۰۰ مشاهده کنید:
آموزش vite

نحوه ایجاد پروژه React با Vite چطور است؟

اگر چنین صفحه‌ای را در مرورگر خود مشاهده کردید، به‌معنی این است که توانسته‌اید React را با استفاده از Vite با موفقیت نصب کنید. در گام بعدی، به شما یاد خواهیم داد که چطور پیش‌نمایش کدهای نوشته‌شده را با استفاده از تلفن‌همراه خود مشاهده کنید.
گام سوم: پیش‌نمایش برنامه با استفاده از تلفن‌همراه

درادامه، به شما یاد خواهیم داد که چطور برنامه خود را در شبکه Local قرار دهید تا بتوانید با استفاده از موبایل هم به آن دسترسی پیدا کنید.

برای اجرای برنامه در سرور Local، باید سرور  فعلی را متوقف کنید. برای این منظور، در ترمینال از ترکیب کلیدهای Ctrl+C استفاده کنید تا به فعالیت سرور توسعه خاتمه دهید. پس‌از‌آن از کدهای زیر برای اجرای پروژه‌تان استفاده کنید:
yarn run dev --host

عبارت –host به Vite دستور می‌دهد تا برنامه شما را روی شبکه Local قرار دهد. پس از اجرای این کد، خروجی زیر را خواهید دید:
Output
vite v2.۹.۱ dev server running at:
  > Network:  `http://ip_address:3000`
  > Network:  `http://ip_address:3000`
  > Local:    http://localhost:3000/
  > Network:  http://network_address:3000/
  ready in 477ms.

همان‌طورکه مشاهده می‌کنید، آدرس IP لوکال منحصربه‌فرد برای شبکه کامپیوتر یا روتر شما در خروجی به شما نشان داده می‌شود. حالا کافی است تلفن‌همراه خود را بردارید و هر‌یک از IP‌های درج‌شده در خروجی را با استفاده از مرورگرتان باز کنید. در این‌ صورت، پیش‌نمایش Vite را روی مرورگر تلفن‌همراه خود خواهید دید.
راه اندازی پروژه ریکت

آموزش ایجاد پروژه React با Vite

در قدم بعدی، باید بویلرپلیت پیش‌فرض Vite را حذف کنید.
گام چهارم: حذف بویلرپلیت پیش‌فرض Vite

در این مرحله، فایل‌های بویلرپلیت پروژه را از پوشه /src حذف می‌کنیم. بدین‌ترتیب، امکان راه‌اندازی برنامه‌ای جدید را خواهید داشت و با ساختار پروژه پیش‌فرض برنامه نیز آشنا خواهید شد.

برای مشاهده محتویات دایرکتوری /src، از کدهای زیر استفاده کنید:
ls src/

خروجی فهرست تمامی فایل‌های موجود در این دایرکتوری است. نمونه این خروجی در شکل زیر نشان داده شده است:
Output
App.css
App.jsx
favicon.svg
index.css
logo.svg
main.jsx

با استفاده از دستور rm، می‌توانید یک فایل تکی را حذف کنید:
rm src/App.css

تمامی فایل‌های موجود در دایرکتوری /src را به‌جز فایل main.jsx حذف کنید. حالا دوباره دستور ls src/ را اجرا کنید تا فایل‌های باقی‌مانده در پوشه را ببینید.
ls src/

اکنون در دایرکتوری باید فقط فایل main.jsx باقی مانده باشد. این موضوع در شکل زیر نشان داده شده است:
Output
main.jsx

با‌توجه‌به اینکه تمامی فایل‌ها را حذف کرده‌اید، حالا باید رفرنس فایل CSS حذف‌شده را نیز در main.jsx حذف کنید. برای این منظور با استفاده از کدهای زیر، فایل main.jsx را برای اعمال ویرایش باز کنید:
nano src/main.jsx

خطوط هایلایت‌شده در کدهای زیر را حذف کنید. بدین‌ترتیب، خواهید توانست لینک‌ها فایل CSS را حذف کنید:
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import "./index.css"
ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

تغییرات اعمال‌شده در فایل main.jsx را ذخیره کنید و سپس آن را ببندید.

درادامه، فایل دیگری با نام App.jsx در پوشه src/ ایجاد کنید. این کار با استفاده از همان کدهای قبلی و به‌صورت زیر امکان‌پذیر است:
nano src/App.jsx

حالا کدهای زیر را در فایل App.jsx ایجادشده قرار دهید:
export default function App() {
  return (
    <>
      <div>Hello World</div>
    </>
  );
}

این کدها یک کامپوننت کاربردی جدید React با نام App ایجاد می‌کنند. بدنه این تابع حاوی یک <div> با متن Hello World است. درنهایت، فایل App.jsx را ذخیره کنید و سپس ببندید.

درادامه، سرور توسعه را با استفاده از کدهای زیر مجدداً اجرا کنید:
yarn run dev --host

حالا آدرس http://localhost:3000 را در مرورگر خود باز کنید. قاعدتاً باید یک صفحه خالی را ببینید که عبارت Hello World در آن درج شده است؛ چیزی شبیه به تصویر زیر:
اموزش پروژه محور react

راه‌اندازی اولین پروژه ری‌اکت با Vite

در این مرحله، توانستید تعدادی از فایل‌های پیش‌فرض را از پروژه Vite حذف کنید. در گام بعدی، یاد خواهید گرفت که چطور برنامه‌ای بیسیک با کامپوننت‌ها و فایل CSS و فایل‌های تصاویر جدید بسازید.
گام پنجم: ساخت برنامه جدید

در این مرحله، یاد می‌گیرید تا با ساخت برنامه بیسیک کامپوننت‌ها را ایجاد کنید و فایل‌ CSS را بسازید و به تصاویر لینک دهید. برای این کار، ابتدا باید کامپوننت جدیدی برای React App ایجاد کنید. در‌ادامه، نحوه انجام این کار را توضیح داده‌ایم:
۱. ایجاد کامپوننت

ایجاد کامپوننت جدید قابلیت ماژولاربودن را به پروژه شما اضافه می‌کند. در این روش، همه کامپوننت‌ها را به دایرکتوری کامپوننت‌ها اضافه می‌کنید تا بتوانید آن‌ها را به شیوه‌ای بهتر سازمان‌دهی کنید.

برای این منظور، از دستور زیر برای ایجاد دایرکتوری جدیدی با نام components استفاده کنید:
mkdir src/components

سپس فایل جدیدی با نام welcome.jsx در دایرکتوری src/components/ ایجاد کنید. این کار با استفاده از کدهای زیر امکان‌پذیر است:
nano src/components/Welcome.jsx

حالا کدهای زیر را به فایل welcome.jsx اضافه کنید:
export default function Welcome() {
  return (
    <>
      <div className="wrapper">
        <h1>Welcome To My App</h1>
        <p>This is going to be the coolest app in the world!</p>
      </div>
    </>
  );
}

با استفاده از کدهای بالا، یک کامپوننت کاربردی React با نام Welcome ایجاد کنید. پیشوند پیش‌فرض به جاوااسکریپت این پیام را می‌دهد که این تابع را به‌عنوان Export پیش‌فرض در نظر بگیرد.

تگ div با نام کلاس wrapper به شما امکان می‌دهد تا این بخش را در فایل CSS قرار دهید. همچنین، تگ‌های h1 و p نیز وظیفه نشان‌دادن پیام را روی صفحه بر‌عهده دارند. حالا فایل را ذخیره کنید و سپس ببندید.

در مرحله بعدی، باید به کامپوننت جدید ساخته‌شده در فایل App.shx رفرنس دهید. با استفاده از کدهای زیر، فایل App.jsx را باز کنید:
nano src/App.jsx

محتویات فایل App.jsx را با استفاده از کدهای زیر به‌روز کنید. قسمت‌هایی که به اصلاح نیاز دارند، هایلایت شده‌اند:
import Welcome from "./components/Welcome"
export default function App() {
  return (
    <>
      <Welcome />
    </>
  )
}

این خط کد فایل welcome.jsx را به برنامه وارد و کامپوننت جدیدی به بدنه تابع لینک می‌کند. پس از اتمام، فایل را ذخیره کنید و ببندید.
۲. اضافه‌کردن تصویر

افزودن تصاویر در React یکی از موضوعات مهمی است که در توسعه اپلیکیشن‌ها کاربرد فراوانی دارد. با استفاده از دستور زیر، دایرکتوری جدیدی با نام img در زیر‌پوشه src/ ایجاد کنید:
mkdir src/img

پس‌ازآن با استفاده از دستور زیر، به دایرکتوری src/img بروید:
cd src/img

حالا می‌خواهیم تصویر زیر را از Sammy دانلود کنیم و در پوشه src.img قرار دهیم:
Front end react چیست؟

تصویر فوق را در پوشه src.img قرار دهید

برای دانلود تصویر با استفاده از wget، به‌صورت زیر اقدام کنید:
wget https://html.sammy-codes.com/images/small-profile.jpeg

با استفاده از دستور زیر، نام تصویر را تغییر دهید:
mv small-profile.jpeg sammy.jpeg

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com


دستور بالا نام فایل را از small-profile.jpeg به Sammy.jpeg تغییر خواهد داد. این کار باعث می‌شود که در‌ادامه ارجاع به این فایل آسان‌تر شود.

حالا با استفاده از کدهای زیر به پوشه Root خود بازگردید:
cd ../../

در مرحله بعدی، فایل welcome.jsx را برای لینک به این تصویر به‌روز خواهیم کرد. فایل را باز کنید:
nano src/components/Welcome.jsx

فایل welcome.jsx را به‌صورت زیر ویرایش کنید. خطوطی که باید ویرایش شوند، با هایلایت نشان داده شده‌اند:
import Sammy from "../img/sammy.jpeg"
export default function Welcome() {
  return (
    <>
      <div className="wrapper">
        <h1>Welcome To My App</h1>
        <p>This is going to be the coolest app in the world!</p>
        <img src={Sammy} alt="Sammy Image" width={۲۰۰} height={۲۰۰} />
      </div>
    </>
  )
}

در اولین خط هایلایت‌شده، تصویر را به‌صورت یک ماژول به React وارد می‌کند. همچنین در خط دوم هایلایت‌شده، درون بدنه تابع یک تگ <img> قرار می‌دهد و اتریبیوت src را به مؤلفه عکسی که تازه وارد کرده‌اید، اضافه می‌کند. همچنین در انتهای این خط، عرض و ارتفاع تصویر به‌عنوان اتریبیوت‌های دیگر روی ۲۰۰ پیکسل تنظیم می‌شود.

حالا فایل welcome.jsx را ذخیره کنید و ببندید. در مرحله بعدی، باید فایل CSS را به پروژه‌تان اضافه کنید.
۳. اضافه‌کردن فایل CSS

در این قسمت، می‌خواهیم فایل CSS سفارشی‌سازی‌شده را به پروژه‌مان اضافه کنیم. با استفاده از این فایل، می‌توانیم رنگ‌و‌لعاب مختصری به برنامه خود بدهیم.

برای انجام این کار، با استفاده از کدهای زیر دایرکتوری جدیدی با نام CSS در زیر‌پوشه src/ ایجاد کنید:
mkdir src/css

حالا با استفاده از دستور زیر، فایل CSS جدیدی را با نام main.css در پوشه src/css ایجاد کنید:
nano src/css/main.css

درادامه، کدهای زیر را در فایل CSS ایجادشده قرار دهید:
body {
  display: grid;
  place-items: center;
  background-color: #b4a7d6;
  font-family: Arial, Helvetica, sans-serif;
}
.wrapper {
  background-color: #fff9e6;
  padding: 20px;
  border-radius: 10px;
}
h1 {
  color: #8873be;
}

با استفاده از کدهای CSS بالا، شبکه‌ای نمایشی ایجاد خواهد شد و سپس آیتم‌ها در مرکز این شبکه قرار خواهند گرفت و یک خانواده فونت و رنگ پس‌زمینه نیز تنظیم خواهد شد.

پس از اضافه‌کردن کدهای زیر، فایل main.css را ذخیره کنید و ببندید. در مرحله بعدی، می‌خواهیم از کامپوننت welcome.jsx به فایل CSS ارجاع دهیم. برای این منظور، با استفاده از کدهای زیر فایل welcome.jsx را باز کنید:
nano src/components/Welcome.jsx

خطوط هایلایت‌شده زیر را در این فایل به‌روزرسانی کنید:
import Sammy from "../img/sammy.png"
import "../css/main.css"
export default function Welcome() {
  return (
    <>
      <div className="wrapper">
        <h1>Welcome To My App</h1>
        <p>This is going to be the coolest app in the world!</p>
        <img src={Sammy} alt="Sammy Image" width={۲۰۰} height={۲۰۰} />
      </div>
    </>
  )
}

با استفاده از این خط، فایل CSS به‌عنوان یک ماژول در کامپوننت شما وارد خواهد شد. پس از انجام این کار، فایل welcome.jsx را ذخیره کنید و ببندید. در قدم بعدی، باید Title برنامه را تغییر دهید.
۴. تغییر Title برنامه

به‌صورت پیش‌فرض، Vite عبارت Vite App را به‌عنوان Title در نوار عنوان مرورگر نمایش می‌دهد. برای اینکه این عنوان را تغییر دهید، فایل index.html موجود در دایرکتوری Root را باز کنید:
nano index.html

تگ <title> را به‌صورت زیر اصلاح کنید:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Cool App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

بدین‌ترتیب، عبارت My Cool App به‌عنوان Title در فایل html ذخیره خواهد شد. فایل index.html ویرایش‌شده را ذخیره کنید و ببندید.

حالا اگر نیاز دارید تا سرور توسعه را مجدداً اجرا کنید، این کار را با استفاده از دستور زیر انجام دهید:
yarn run dev --host

بعد از انجام این کار، مجدداً آدرس http://localhost:3000 را در مرورگرتان وارد کنید. بدین‌ترتیب، نسخه جدید برنامه‌ را خواهید دید:
برنامه نویسی فرانت اند با Vite

مشاهده نسخه جدید برنامه
گام ششم: گرفتن Build برای تولید نهایی

در این مرحله، بسته نرم‌افزاری بهینه‌شده و آماده برای استقرار در سرور را با‌هم خواهیم ساخت. برای گرفتن Build، دستور زیر را در ترمینال اجرا کنید:
yarn run build

این دستور پوشه dist جدیدی با فایل‌های Source بهینه‌شده ایجاد می‌کند که می‌توانید آن را برای تولید در سرور خود مستقر کنید. با این خط کد، خروجی زیر را خواهید دید:
Output
vite v2.۹.۱ building for production...
✓ ۳۳ modules transformed.
dist/assets/pencil.4e765d86.png   ۶۶.۴۶ KiB
dist/index.html                   ۰.۴۵ KiB
dist/assets/index.e3291b10.css    ۰.۱۸ KiB / gzip: ۰.۱۶ KiB
dist/assets/index.14619c6f.js     ۱۳۰.۶۵ KiB / gzip: ۴۲.۳۴ KiB
Done in ۲.۵۰s.

حالا می‌توانید محتویات پوشه dist را به‌صورت آنلاین روی سرور مستقر کنید. اگر از سرور Apache یا Nginx استفاده می‌کنید، این کار را به‌صورت دستی نیز می‌توانید انجام دهید. همچنین، از پلتفرم اپلیکیشن برای اجرای اسکریپت Build و تولید خودکار فایل‌های آن می‌توانید استفاده کنید.
چگونه برنامه نویس فرانت اند شویم؟

گام به گام  تا ایجاد پروژه React با Vite
جمع‌بندی

برای ایجاد پروژه با استفاده از React، ابزارهای مختلفی وجود دارند. ابزار Vite یکی از این ابزارهاست که با‌توجه‌به حجم کم Dependencyهای آن و نیز کارایی فراوانش، از محبوبیت بسیاری برخوردار است. در این مقاله آموزشی از بلاگ پارس پک، نحوه ایجاد پروژه‌ای ساده را به‌صورت کاملاً تصویری آموزش داده‌ایم. با خواندن این مقاله از آموزش برنامه نویسی، می‌توانید با نحوه کدنویسی برای انجام این پروژه به‌طورکامل آشنا شوید.
سؤالات متداول
۱. React چیست؟

React یکی از کتابخانه‌‌های زبان برنامه‌نویسی قدرتمند JavaScript است که برنامه‌نویسان از آن برای کدنویسی فرانت‌اند وب‌سایت استفاده می‌کنند.
۲. Vite چیست؟

از دیدگاه فنی، Vite یکی از ابزار‌های توسعه برای تمامی فریم‌ورک‌ها و کتابخانه‌های جاوا‌اسکریپتی، ازجمله React است.
۳. Yarn چیست؟

Yarn سیستم پکیجینگ نرم‌افزاری است که در سال ۲۰۱۶، فیسبوک آن را برای محیط Node.js طراحی کرد.
۴. Localhost یعنی چه؟

در شبکه‌های کامپیوتری، Localhost به هاستی گفته می‌شود که در سیستم فعلی استفاده می‌شود. بسیاری از توسعه‌دهندگان، قبل از اینکه کدهای خود را روی سرور بارگذاری کنند، از‌طریق Localhost آن را آزمایش می‌کنند و پس از عیب‌یابی کامل، آن را روی سرور قرار می‌دهند.


روژه React از پایه بدون استفاده از create-react-app

ایجاد و راه اندازی پروژه React از ابتدا ممکن است گاهی اوقات کمی مشکل ساز باشد، حتی اگر اولین بار نیست که یک پروژه React را شروع می‌کنید. به همین دلیل است که از create-react-app استفاده می‌کنیم، دستوری که تمام کامپوننت‌ها و ماژول‌ها را برای ما آماده و نصب می‌کند و پس از اتمام این روند، برنامه آماده است.

هرچند بهره گیری از create-react-app برای شروع کار بسیار خوب است، مخصوصا برای کسانی که در دنیای React تازه وارد هستند یا نمی‌خواهند وقت خود را برای تنظیم همه چیز صرف کنند. اما جالب است بدانید یک مورد دیگر نیز وجود دارد که این کارها را برای ما انجام می‌دهد.

همانطور که می‌توانید تصور کنید، این روش به سادگی اجرای یک دستور ساده نخواهد بود، اما مطمئنا برای حرفه توسعه دهنده شما رضایت بخش‌تر و مفیدتر است (ناگفته نماند که این یک فرآیند قابل استفاده مجدد است). همچنین از شر موارد نه چندان ضروری که همراه با create-react-app ایجاد شده و پروژه شما را بیش از حد سنگین می‌کند، خلاص می‌شوید.

توجه داشته باشید که من از ساختار خاصی برای پروژه استفاده نخواهم کرد، زیرا فکر می‌کنم این کار بسیار سلیقه‌ای است و هر توسعه‌دهنده‌ای به روشی متفاوت کار می‌کند، بنابراین این انتخاب را به شخص شما واگذار می‌کنم.

بسیار خب با تمام این گفته‌ها بیایید به اصل مطلب بپردازیم.
مرحله 1: ایجاد پوشه‌ای که پروژه را میزبانی می‌کند

در ابتدا قصد داریم با ایجاد یک دایرکتوری جدید برای پروژه خود در محلی که انتخاب می‌کنیم، کار را شروع کنیم.

mkdir my-react-project

پس از ایجاد می‌خواهیم وارد آن شویم.

cd my-react-project

مرحله 2: شروع پروژه

برای شروع پروژه می‌خواهیم یک دستور npm را اجرا کنیم.

npm یک پکیج می‌باشد که مدیریت نسخه‌ها و وابستگی‌ها را به عهده دارد و برای جاوااسکریپت ساخته شده است. اگر هنوز npm را نصب نکرده‌اید باید مستقیما Node.js را نصب کنید، زیرا آنها با هم کار می‌کنند و npm نیز در نصب Node.js گنجانده شده است. Node.js هم به ما اجازه می‌دهد جاوااسکریپت را در سمت سرور اجرا کنیم.

همچنین می‌توانید از یک مدیر بسته متفاوت مانند Yarn یا Bower استفاده کنید.

اگر مطمئن نیستید که npm/Node.js را قبلا نصب کرده‌اید، فقط کافی است دستورات زیر را اجرا کرده تا آخرین نسخه‌های نصب شده را مشاهده کنید. اگر این دستورات شماره نسخه را نشان داد، در حال حاضر آنها را در سیستم خود دارید. در غیر این صورت باید دوباره آن‌ها را نصب کنید.

npm -v

node -v

هنگامی که npm و Node.js را برای استفاده در سیستم آماده کردیم، دستور زیر را اجرا می‌کنیم:

npm init

این دستور یک فایل package.json ایجاد می‌کند، این فایلی است که تمام وابستگی‌ها و اسکریپت‌های پروژه ما در آن مشخص می‌شود.

در طول مراحل ایجاد فایل، ترمینال سوالاتی را از شما می‌پرسد تا اجازه دهد پروژه خود را با اطلاعات مناسب در مورد آن تنظیم کنید. اگر می‌خواهید از سوال فعلی بگذرید، کافیست enter را فشار دهید تا به پرسش بعدی برود.

اگر تمایلی به دادن اطلاعات اضافی برای پروژه ندارید یا می‌خواهید بعدا آن را پیکربندی کنید، فقط فلگ y- را به دستور اضافه کنید:

npm init -y

پس از نصب، یک فایل جدید package.json در پروژه خود خواهیم داشت که به صورت زیر است:

{
  "name": "my-react-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"

}

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com


مرحله 3: نصب وابستگی‌ها

برای اینکه برنامه React ما به درستی و مطابق انتظار کار کند، باید چند وابستگی به صورت دستی نصب کنیم.
وابستگی‌های React

ما وابستگی‌های زیر را در سمت React نصب خواهیم کرد:

react: کتابخانه جاوااسکریپت که با آن کار خواهیم کرد.

react-dom: پکیجی حاوی برخی از متدها برای مدیریت عناصر DOM.

react-router-dom: پکیجی که شامل اتصالات DOM برای React Router است.

npm install react react-dom react-router-dom

وابستگی‌های Webpack

برای آماده سازی پروژه خود برای وب به یک بسته نرم‌افزاری ماژول نیز نیاز خواهیم داشت. Webpack تمام فایل‌های جاوااسکریپت موجود در پروژه را بسته بندی کرده و تمام منابع لازم را برای استفاده در مرورگر آماده می‌کند.

از آنجا که برای کار در محیط توسعه فقط به Webpack نیاز داریم، بنابراین می‌خواهیم تمام وابستگی‌های مربوط به آن را با اضافه کردن flag --save-dev یا D- به دستور نصب کنیم.

همچنین وابستگی‌های زیر را در کنار Webpack نصب خواهیم کرد:

webpack: پکیج نرم‌افزاری.

webpack-cli: CLI برای Webpack.

npm install --save-dev webpack webpack-cli

وابستگی‌های Babel

Babel یک کامپایلر جاوااسکریپت است که جاوااسکریپت ES6 را به جاوااسکریپت ES5 تبدیل می‌کند، زیرا همه مرورگرها در حال حاضر از ویژگی‌های ECMAScript 6 پشتیبانی نمی‌کنند.

وابستگی‌های مربوط به Babel که می‌خواهیم نصب کنیم شامل موارد زیر است:

babel/core@: هسته کامپایلر Babel.

babel/preset-react@: پکیجی حاوی مجموعه‌ای از پلاگین‌ها است که برای پشتیبانی از ویژگی‌های React استفاده می‌شود.

npm install --save-dev @babel/core @babel/preset-react

قبل از اینکه بیشتر به وابستگی‌ها بپردازیم، می‌خواهیم Babel را در پروژه خود پیکربندی کنیم تا فایل‌های جاوااسکریپت ما طبق آنچه در نظر گرفته شده منتقل شوند.

بیایید به ترمینال برگردیم تا یک فایل جدید برای این پیکربندی ایجاد کنیم:

touch .babelrc

سپس فقط کد زیر را اضافه کنید:

{
  "presets": [
    "@babel/preset-react"
  ]

}

لودرها برای Webpack

Webpack برای پیش پردازش فایل‌ها به چیزی به نام لودر نیاز دارد. آنها برای بسته بندی منابع استاتیک فراتر از جاوااسکریپت مفید هستند.

اینها لودرهای اساسی اند که ما با آنها کار خواهیم کرد:

babel-loader: لودر برای Babel.

html-loader: لودر برای HTML.

style-loader: لودری که استایل‌ها را به DOM تزریق می‌کند.

css-loader: لودر برای CSS.

(*)sass-loader: لودر برای SASS.

(*) این لودر کاملا ضروری نیست، اما درصورتی که بخواهید از پیش پردازنده CSS استفاده کنید، برای آن نیز به لودر نیاز دارید. همچنین لودرهایی برای LESS ، PostCSS ، Stylus و... نیز وجود دارد.

npm install --save-dev babel-loader html-loader style-loader css-loader sass-loader

پلاگین‌های Webpack

ما همچنین به پلاگین‌های Webpack نیاز داریم که برای اهداف بسته بندی به ما کمک می‌کنند.

html-webpack-plugin: این پلاگین برای ایجاد فایل‌های HTML استفاده می‌شود که باندل‌ها را رزرو می‌کند.

توجه: از آنجا که ما در یک محیط توسعه کار می‌کنیم، فقط از یک لودر برای استایل‌ها استفاده خواهیم کرد. اما برای بیلدها توصیه می‌شود CSS را از باندل با استفاده از MiniCssExtractPlugin استخراج کنید. این پلاگین CSS را استخراج کرده و آن را در فایل‌های جداگانه دسته بندی می‌کند و برای هر فایل جاوااسکریپت حاوی CSS فایل‌هایی ایجاد می‌کند.

لودر سریعتر است و در داخل تگ <style> استایل‌ها را به صورت داخلی تنظیم می‌کند، در حالی که این پلاگین با استفاده از تگ <link> فایل استایل‌های خارجی را به سند HTML لینک می‌دهد.
وابستگی‌های سرور

برنامه ما همچنین به یک سرور نیاز دارد، بنابراین از وابستگی‌های مربوط به سرور نیز استفاده خواهیم کرد. ما قصد داریم موارد زیر را نصب کنیم:

express: فریمورک Node.js که برای ایجاد فایل سرور و رسیدگی به درخواست‌های سرور از آن استفاده خواهیم کرد.

nodemon: ابزاری که هر زمان تغییری در دایرکتوری برنامه ایجاد شود، برنامه وب ما را رفرش می‌کند.

npm install express

npm install --save-dev nodemon

مرحله 4: پیکربندی Webpack

مرحله بعدی قرار دادن لودرها و پلاگین‌های Webpack است که به تازگی در یک فایل پیکربندی نصب کرده‌ایم تا به آن اطلاع دهیم رفتار آن در روند بسته فایل‌های ما چگونه است.

برای شروع قصد داریم یک فایل خالی برای این منظور ایجاد کنیم. بازگشت به ترمینال:

touch webpack.config.js

قبل از رفتن به محتوای این فایل پیکربندی می‌خواهیم ببینیم که این برنامه واقعا چه کاری انجام می‌دهد و چگونه رفتار می‌کند.

اول از همه باید به Webpack بگوییم که نقطه ورود برنامه ما کدام خواهد بود. این نقطه ورود یک فایل جاوااسکریپت به نام index.js است.

همچنین باید فایل خروجی را مشخص کنیم، این آخرین فایل جاوااسکریپت است که به صورت باندل شده و تنها یک فایل است که به طور صریح از فایل HTML ارائه شده ارجاع می‌شود.

در این مرحله ذکر پوشه dist مهم است. این پوشه یک دایرکتوری است که به عنوان بخشی از فرآیند باندلینگ ایجاد شده و تمام فایل‌های استاتیک تولید شده در نتیجه آن را در خود نگه می‌دارد.

موارد بیشتری که Webpack باید بداند نوع فایل‌هایی است که برای ترجمه صحیح با آنها کار می‌کند. در حال حاضر شامل انواع HTML ، CSS، SASS/SCSS و JavaScript می‌باشد. اما اگر در آینده نیاز به کار با انواع مختلفی از فایل‌ها داشته باشیم (قطعا این اتفاق خواهد افتاد) از جمله تصاویر، فونت‌ها و... اینها نیز به لودرهای خاص خود نیاز دارند.

و در آخر باید پیکربندی پلاگین‌های لازم را انجام دهیم. در این حالت HtmlWebpackPlugin ، HTML تولید شده برای مرورگر را ایجاد می‌کند.

webpack.config.js

const path = require("path");
const webpack = require("webpack");
const HTMLWebpackPlugin = require("html-webpack-plugin");
 
module.exports = {
  entry: "./index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve("dist"),
    publicPath: "/",
  },

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

  module: {
    rules:[
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
      {
        test: /\.html$/,
        use: "html-loader"
      },
      /*Choose only one of the following two: if you're using
      plain CSS, use the first one, and if you're using a
      preprocessor, in this case SASS, use the second one*/
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.scss$/,
        use:[
          "style-loader",
          "css-loader",
          "sass-loader"
        ],
      },
    ],
  },  
  plugins: [
    new HTMLWebpackPlugin({
      template: "index.html"
    }),
  ]

}

مرحله 5: ایجاد الگوی HTML

این ساده‌ترین مرحله است اما به هر حال باید آن را انجام دهیم.

ما باید یک سند HTML اصلی ایجاد کنیم که توسط HTMLWebpackPlugin به عنوان الگویی برای تولید سند جدید استفاده شود. به همین راحتی!

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>

</html>

به <div> خالی با آی دی root توجه کنید. بعدا درمورد آن صحبت خواهیم کرد.
مرحله 6: ایجاد سرور

سرور قرار است یک فایل جاوااسکریپت جدید باشد که درگاهی را برای گوش دادن به شما باز می‌کند و چند درخواست انجام می‌دهد.

touch app.js

ما قصد داریم آن را app.js بنامیم اما شما می‌توانید هر نام دلخواهی به آن بدهید. فقط مراقب بزرگ‌نویسی باشید. بعدا این مورد را خواهید فهمید.

app.js

const express = require("express");
const app = express();
const path = require("path");
const port = process.env.PORT || 3000;
 
app.listen(port, () => {
   console.log(`The app server is running on port: ${port}`);
});
 
const DIST_DIR = path.join(__dirname, "dist");
const HTML_FILE = path.join(DIST_DIR, "index.html");
 
app.use(express.json());
app.use(express.static("public"));
app.use(express.static("dist"));
 
app.get("/", (req, res) => {
   res.sendFile(HTML_FILE, function(err){
      if(err){
         res.status(500).send(err);
      }
   });

});

کاری که ما در این فایل انجام می‌دهیم شروع یک سرور جدید است که برای اتصال به پورت 3000 گوش می‌دهد. سپس فایل HTML تولید شده توسط Webpack به URL اصلی ارسال می‌شود (به عبارت دیگر این HTML صفحه اصلی برنامه ما خواهد بود). همچنین نشان می‌دهیم که هر فایلی در دایرکتوری public و dist است استاتیک بوده و باید به همین ترتیب با آنها رفتار شود.
مرحله 7: ایجاد برنامه React

اکنون قصد داریم App.js را ایجاد کنیم که اصلی‌ترین کامپوننت برنامه ری‌اکت ما خواهد بود (قبلا که برای بزرگ‌نویسی هشدار داده بودیم در اینجا اهمیت پیدا می‌کند).

App.js

import React from "react";
 
const App = () => {
   return <div>Hello, World!</div>;
};
 

export default App;

رندر این کامپوننت به HTML تزریق می‌شود، بنابراین آنچه که با باز کردن مرورگر مشاهده خواهیم کرد: Hello, World!

بیایید نگاهی به چگونگی انجام این کار بیندازیم.
مرحله 8: ایجاد نقطه ورود به برنامه React

در این مرحله می‌خواهیم مسیریابی را برای برنامه خود مشخص کنیم و همچنین جایی که در DOM باید محتوای React وارد شود.

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
import App from "./App.js";
import "./styles.scss";
 
const appRouting = (
  <Router>
    <Switch>
      <Route exact path="/" component={App} />
    </Switch>
  </Router>
);
 

ReactDOM.render(appRouting, document.getElementById("root"));

ما فقط نشان می‌دهیم که وقتی URL دقیقا با مسیر ریشه مطابقت داشته باشد، باید کامپوننت برنامه رندر شود و محتوای آن باید در داخل تگی با آی دی root در فایل index قرار گیرد.
مرحله 9: تعریف اسکریپت‌ها

در آخر می‌خواهیم اسکریپت‌ها را تنظیم کنیم تا بتوانیم برنامه خود را بسازیم و اجرا کنیم.

دوباره به package.json برگردیم، در ابتدا چیزی شبیه به این در بخش اسکریپت‌ها داشتیم:

{
  ...
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
    }
  ...

}

اکنون می‌خواهیم دو مورد دیگر اضافه کنیم:

{
  ...
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rm -rf dist && webpack --mode development",
    "dev": "nodemon app.js"
  ...

}

مرحله 10: ساخت و اجرای برنامه

آخرین مرحله ساخت و اجرای برنامه است.

ابتدا باید یک دستور build را برای باندل کردن وارد کنیم:

npm run build

سپس کافی است فقط آن را اجرا کنید:
 پروژه‌ی React که هر کسی نیاز دارد تا در پورتفولیوی خود داشته باشد

شما در حال کار کردن با ریکت هستید و درک کاملی از این کتابخانه دارید. از این گذشته، شما جاوااسکریپت را هم به خوبی به یاد دارید و از ویژگی‌های آن بیشترین استفاده را در کد React خود می‌کنید.

شما پیشرفت زیادی کرده‌اید اما الان در حال انجام چه کاری هستید.

چگونه می‌توان شکاف بین دانستن اصول React و تبدیل شدن به یک توسعه‌دهنده حرفه‌ای را پر کرد؟

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com


بسیاری از توسعه‌دهندگان React یا هر کتابخانه دیگر جاوااسکریپت وقتی به این مرحله می‌رسند به مشکل برمی‌خورند. آن‌ها React و جاوااسکریپت را به خوبی یاد گرفته‌اند و از آن استفاده می‌کنند چون خیلی مفید است، اما آن‌ها مرحله بعدی را نمی‌دانند.
چرا باید برنامه کاربردی بسازیم

بعد از اینکه اصول اولیه React را یاد گرفتید، باید با مهارت‌هایی که کسب کرده‌اید، برنامه‌های زیادی بنویسید. این عمل یکی از اصول تبدیل شدن به یک توسعه‌دهنده React است با دانستن این‌که چطور برنامه‌های خود را بسازید و از ابزارهای مناسب در اکوسیستم React استفاده کنید.

اما با React چه برنامه‌هایی را باید بسازید تا توانایی خود را به عنوان یک توسعه‌دهنده افزایش دهید؟

در این مقاله، به 5 نوع برنامه مختلف می‌پردازیم که شما باید بعد از انجام برنامه todo list شروع به نوشتن آن‌ها بکنید. فایده بزرگ نوشتن این برنامه‌ها این است که وقتی آن‌ها را داخل پورتفولیوی خود قرار می‌دهید برای شما یک رزومه عالی می‌شود تا آن را به کارفرما نمایش دهید.

برای هر نوع برنامه کاربردی، من مثال‌هایی برای شما می‌آورم که می‌تواند باعث انگیزه شما شود و ابزارهایی را به شما توصیه می‌کنم که از آن‌ها استفاده کنید، و همچنین یک دمو از پروژه‌هایی را که با React نوشته‌ام را نیز به شما نشان خواهم داد.
چگونه شروع به ساختن برنامه‌ها با React کنیم

بر خلاف یادگیری خود React، شما می‌توانید ده‌ها مقاله پیدا کنید تا عمیق‌تر هر مفهوم را درک کنید، فرآیند ایجاد یک اپ به طور گسترده یک فعالیت خود هدایت‌شده بدون راهنمایی زیاد است.

اگر شروع به ساخت برنامه‌های خود کرده‌اید ، توصیه می‌کنم مقالاتی را جستجو کنید که اصول اولیه ساخت یک برنامه را به شما آموزش می‌دهند و کد برنامه‌ای که ارائه می‌دهند را حتما بررسی کنید. حتی روند خواندن کد به خودی خود شما را به یک توسعه‌دهنده بهتر تبدیل می‌کند.

اگر ساخت این نمونه‌ها برای شما سخت به نظر می‌رسد، آنچه که شما به عنوان یک توسعه‌دهنده React باید به‌یاد بیارید این است که برنامه‌ها را باید به اجزای کوچک‌تر تبدیل کنید. هر برنامه باید به صورت قطعه – قطعه یا کامپوننت – کامپوننت ساخته شود. تمرکز خود را بر روی ایجاد یک ویژگی در هر زمان مشخص قرار دهید. با تمرین، شما درک بهتری نسبت به این که از چه ابزاری برای هر ویژگی استفاده کنید پیدا می‌کنید و همچنین الگوهای معمول برای ساختن یک برنامه کاربردی پیدا خواهید کرد.

توجه: یکی از تصورات غلط من هنگام نوشتن برنامه‌های واقعی مانند این‌ها، این بود که برای این که برنامه عملکرد خوبی داشته باشد، حتما باید از API برای بک‌اند استفاده کنم و این کار را با نود جی اس و پایتون انجام بدهم.

لازم نیست این کار را بکنید. به فن‌آوری‌های serverless قدرتمند مانند Firebase، AWS Amplify، یا Hasura نگاه کنید که کمک می‌کند تا کار‌های بک‌اند را به صورت کامل انجام دهید. در ابزارهایی سرمایه‌گذاری کنید که به شما کمک می‌کند تا برنامه بیشتری بنویسید و در وقت خود صرفه‌جویی کنید.
یک برنامه شبکه اجتماعی بسازید

اگر مجبور باشم فقط یک برنامه را برای اضافه کردن به نمونه کارها به شما پیشنهاد کنم، این یک برنامه شبکه اجتماعی است. توییتر، فیسبوک و اینستاگرام کاملاً پیشرفته هستند و به مرور زمان ویژگی‌های جدیدی به آن‌ها اضافه خواهد شد تا کاربران خود را نگه دارند. مهم‌تر از آن، این یک نوع برنامه‌ است که باعث می‌شود شما کار کردن با توابع را بهتر یاد بگیرید.

تقریباً در تمام برنامه‌های شبکه اجتماعی چندین ویژگی مشترک وجود دارد:

    امکان ارسال پست به همراه متن یا فایل‌های مختلف برای کاربران
    یک نمای کلی از آن پست‌ها
    به کاربران دیگر این امکان را می‌دهد که برای پست‌ها لایک و کامنت بگذارند
    و همچنین تأیید اعتبار کاربر

و زمانی‌که این کار را انجام دادید، می‌توانید برای هر یک از کاربران خود پروفایل اضافه کنید، که در آن، آن‌ها می‌توانند حساب خود را شخصی‌‌‌‌سازی کنند و همچنین کاربرانی را که دنبال‌کننده آن‌ها هستند را مدیریت کنند.

 چند نمونه: اینستاگرام، توئیتر، اسنپ‌چت، ریدیت

فناوری‌های مورد استفاده:

    به کمک React یا Next.js یک برنامه ایجاد کنید تا یک رابط کاربری پویا از پیام‌ها، لایک‌ها و پست‌ها داشته باشید
    استفاده از Firebase، AWS Amplify یا Hasura (با استفاده از GraphQL) برای داده‌های بلادرنگ
    استفاده از توابع Serverless مانند AWS Lambda یا توابع Firebase برای نوتیفیکیشن
    استفاده از فضای ذخیره‌سازی Cloudinary یا Firebase برای بارگذاری عکس یا فیلم

یک برنامه تجارت‌الکترونیک بسازید

تعدادی از سایت‌های موردعلاقه خود را انتخاب کنید من تضمین می‌کنم حداقل یکی از آن‌ها یک برنامه تجارت‌الکترونیک باشد، حتی اگر آن فقط یک فروشگاه کوچک باشد. برنامه‌های تجارت‌الکترونیک همه‌کاره هستند و من شرط می‌بندم که از شما خواسته می‌شود تا در بعضی از مواقع در حرفه خود به عنوان یک توسعه‌دهنده یکی از آن‌ها را بسازید.

ساختن یک پلتفرم تجارت‌الکترونیک در مقیاس بزرگ مانند آمازون وسوسه‌انگیز است، اما من توصیه می‌کنم روی چیزی کوچک‌تر تمرکز بیشتری کنید.

به جای برنامه‌ای که روی فروش همه چیز تمرکز دارد، بهتر است وارد صنعتی بشوید که مورد علاقه شما باشد. به عنوان مثال، اگر کالاهای خانگی را دوست دارید ، ممکن است نگاهی بیندازید به Crate & Barrel یا Williams-Sonoma و ببینید چه چیزی برای سایتهای خود ساخته اند.

علاوه بر محصولات ، برنامه‌های تجارت‌الکترونیکی ممکن است خدماتی را به مصرف‌کنندگان ارائه دهند. اگر خدمتی است که به صورت محلی ارائه می‌شود، می‌تواند یک نقشه تعاملی به برنامه اضافه شود تا ارائه دهنده خدمات و مشتری بتوانند موقعیت مکانی یکدیگر را بشناسند. برنامه‌های تحویل غذا از قبیل UberEats و Doordash که نیاز به مکان شخصی که غذا را سفارش می‌دهد، به ذهن شما خطور می‌کند.

صرف‌نظر از اینکه چه چیزی فروخته می‌شود، چه فیزیکی باشد چه مجازی، هر برنامه تجارت‌الکترونیکی شامل نمای فروشگاهی با جزئیات محصول یا خدمات خواهد بود. اگر کاربران بتوانند چندین محصول را در یک زمان خریداری کنند، باید یک سبد خرید داشته باشند که در آن کاربران بتوانند محصولاتی را که می‌خواهند بخرند، مدیریت کنند.

سرانجام، هر برنامه تجارت‌الکترونیکی به یک فرایند پرداخت نیاز دارد که در آن کاربران بتوانند محصولات خود را بصورت ناشناس یا پس از تأیید اعتبار خریداری کنند.

چند نمونه معروف: Airbnb, Uber, UberEats, Doordash, Etsy, Udemy

فناوری‌های مورد استفاده:

    به کمک React یا Gatsby.js یک اپ فروشگاهی برای نمایش محصولات ایجاد کنید.
    برای هندل کردن قابلیت پرداخت از react-stripe-elements استفاده کنید
    از توابع سرور serverless مانند Netlify یا AWS Lambda برای عملیات پرداخت استفاده کنید
    از Algolia برای جستجوی سریع محصولات استفاده کنید
    از Snipcart برای ایجاد آسان سبدخرید و مدیریت محصولات سبدخرید استفاده کنید

یک برنامه سرگرم‌کننده بسازید

این گسترده‌ترین گروه در این بین است. منظور من از سرگرم‌کننده چیست؟ یک اپ که حول یک نوع خاص از رسانه متمرکز است. که می‌تواند فیلم، پادکست‌ها یا موسیقی باشد.

نمونه‌های بزرگی در این زمینه وجود دارد، به ترتیب Netflix ،Audible و Soundcloud یا Spotify خواهند بود. اگر شما هنر یا طراحی را در این گروه بگنجانید، می‌توانیم سایت‌هایی مانند Behance یا Dribbble را نیز به این فهرست اضافه کنید.

چیزی که در مورد این گروه جالب است این است که بسیاری از برنامه‌های سرگرمی زیرمجموعه برنامه‌های رسانه‌های اجتماعی قرار دارند. برای مثال، برنامه تیک‌تاک، که فیلم‌های کوتاه و فانتزی را نمایش می‌دهد، با تعامل زیاد کاربر هدایت می‌شود. یک برنامه دیگر مانند یوتیوب بر روی تعاملات کاربران از طریق لایک، نظرات و اشتراک گذاری متمرکز است.

به این فکر کنید که به چه نوع رسانه یا سرگرمی بیش‌تر علاقه دارید و ببینید آیا می‌توانید یک پلت‌فرم ساده وابسته به آن بسازید، که در آن کاربران می‌توانند به سیستم وارد شوند و محتوایی که دوست دارند ذخیره کنند. پس از آن، به اضافه کردن عناصر اجتماعی بپردازید که امکان اضافه کردن نظرات ، لایک و اشتراک گذاری مطالب را با سایر کاربران در این سیستم‌عامل فراهم می‌آورد.

چند نمونه معروف: یوتیوب، نتفلیکس، اسپاتیفای، تیک‌تاک

فناوری‌های مورد استفاده:

    با کمک React یا Next.js یا Gatsby.js رابط کاربری سایت ایجاد کنید
    پکیج npm، react-player برای پخش رسانه را نصب کنید
    از فضای ذخیره‌سازی Cloudinary یا Firebase برای آپلود رسانه‌ها کنید
    از Algolia برای جستجوی سریع صدا، ویدیو، و ... استفاده کنید

یک پیام‌رسان بسازید

برنامه‌های پیام‌رسان بسیار زیاد هستند. شما به احتمال زیاد یک سرویس پیام‌رسان رایگان مانند واتس‌آپ یا وایبر را در تلفن خود دارید. سرویس‌هایی مانند Intercom با پیام فوری نیز به عنوان برنامه‌های وب در دسترس هستند تا شرکت ها بتوانند پشتیبانی فوری مشتری را به کاربران خود ارائه دهند.

هر برنامه پیام‌رسانی می‌تواند قابلیت مکالمه با دو یا چند نفر باشد که پیام‌ها به صورت آنلاین ارسال می‌شوند. مشابه برنامه وب‌سایت‌های ارتباط جمعی، من یک سرویس مانند Firebase یا Hasura را پیشنهاد می‌کنم که داده‌ها را از طریق WebSockets برای پیام‌هایی که باید بلافاصله در مکالمه نمایش داده شوند را ارسال می‌کند.

بیشتر برنامه‌های پیام‌رسانی برای دستگاه‌های تلفن همراه یا تبلت هستند. اگر این اولین نسخه برنامه شما نیست، این یک فرصت عالی برای حرکت به ورای وب و ساختن یک برنامه موبایل با React Native است. با این وجود بهتر می توانید یک برنامه پیام‌رسان هم برای وب و هم تلفن همراه را به صورت همزمان با کمک React Native Web بسازید.

 

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com


چند نمونه معروف: واتس‌آپ، وایبر، اسلک، مسنجر

فناوری‌های مورد استفاده:

    استفاده از React native یا React native web برای ساختن یک اپ موبایل یا اپ هایبرید (برنامه وب + برنامه موبایل)
    Firebase ، AWS Amplify یا Hasura (با استفاده از GraphQL) برای ارسال پیام به صورت بلادرنگ
    استفاده از فضای ذخیره‌سازی Cloudinary یا Firebase برای ارسال پیام‌های تصویری یا محتوای ویدئویی
    استفاده از پکیج npm، emoji-mart برای استفاده از ایموجی در پیام‌رسان

یک برنامه کاربردی بسازید

این احتمالا ساده‌ترین نوع برنامه برای شروع کار است، با توجه به این‌که دوره‌های آموزشی زیادی برای ساخت یک برنامه کاربردی کوچک وجود دارد. زمانی که از برنامه‌های کاربردی صحبت می‌کنم منظورم برنامه‌هایی مدیریت تیم‌ها و مدیریت لیست‌های کار است. به طور کلی هر چیزی که به شما کمک کند تا کار خاصی را انجام دهید یا آن کار را بهتر انجام دهید را می‌گویم.

نکته مهم در مورد ساخت یک اپلیکیشن کاربردی در ابتدا این است که به دلیل سادگی نسبی بسیاری از ویژگی‌های آن، یک شناخت خوبی برای ایجاد اپلیکیشن ارائه می دهد.

شما می‌توانید با چیزی ساده شروع کنید، مانند ویرایشگر متن تا متن قالب‌بندی شده را به راحتی بنویسید و سپس آن را گسترش دهید. سپس توانایی ذخیره متن به عنوان فایل‌های شخصی روی کامپیوترتان را اضافه کنید. پس از آن، یک ویژگی برای تبدیل متن به HTML برای نوشتن ایمیل‌های قالب‌بندی به آن اضافه کنید.

برای شروع ساختن یک برنامه کاربردی، از خودتان بپرسید که چه برنامه‌هایی می‌تواند به شما کمک کند تا کار‌های روزانه خود را آسان‌تر کنید و سپس شروع کنید.

 

چند نمونه معروف: Todoist, Notion, Things و غیره

فناوری‌های مورد استفاده:

    برای ساخت برنامه وب از React و برای برنامه موبایل React native استفاده کنید
    استفاده از پکیج npm، react-markdown برای نشان دادن متن (markdown) در UI برنامه
    استفاده از پکیج npm، react-codemirror2 برای نوشتن کد داخل notes
    استفاده از پکیج npm، react-draggable برای مرتب‌سازی مجدد محتوای لیست با کلیک کردن و کشیدن
پروژه های ری اکت نیتیو ⭐ ارائه خدمات برنامه نویسی با ری اکت نیتیو ، پروژه درسی ری اکت نیتیو ، سفارش پروژه ری اکت نیتیو (React native) خود را به صدها متخصص حرفه ای متلب پروژه بسپارید و با کیفیت عالی سفارش خود را تحویل بگیرید.

معرفی ری اکت نیتیو

ری اکت نیتیو یکی مد برنامه نویسی می باشد که توانایی اجرا بر روی انواع پلتفرم های مختلف را دارد همه یکی از آرزوهای دیرینه برنامه نویسان نوشتن کدهایی بود که قابلیت اجرا بر روی انواع سخت افزارها با پلتفرهای مختلف را داشته باشد قبلا متخصصان مجبور بودن برای هر سخت افزاری یک کد مخصوص بنویسند و این کار علاوه بر زمان بسیار زیاد باعث صرف هزینه های بسیار زیادی می باشد این پاسخ گویی به مدت زیادی طول کشید تا اینکه اولین توسط شرکت فیس بوک برای حل مشکلات برنامه نویسی آن ارائه شد بعد شرکت ها و پلتفرم های بزرگ ها دنیا به سمت برنامه نویسی ری اکت نیتیو روی آوردند یکی از مشکلاتی که متخصصانی که فیس بوک با آن مواجه بوده عدم تطبیق برنامه های نوشته شده با پلت فرم های مختلف بود به عنوان مثال کدهای نوشته در محیط اینستاگرام در فیس بوک قابلیت اجرایی نبود با این که هر دو پلتفرم توسط یک شرکت اداره میشد و این باعث سردرگرمی و همچنین مشکلات بسیار زیادی شده است بود که این امر با آمدن ری اکت نیتیو حل شد.

ما چه نوع پروژه های ری اکت نیتیو را میتوانیم انجام بدهیم ؟
انجام پروژه با نرم افزار ری اکت نیتیو
انجام پروژه دانشجویی ری اکت نیتیو
انجام پروژه کلاسی ری اکت نیتیو
انجام پروژه برنامه نویسی ری اکت نیتیو

 

انجام پروژه ری اکت نیتیو

مراحل انجام پروژه ری اکت نیتیو در متلب پروژه

سفارش انجام پروژه ری اکت نیتیو

در مرحله اول با ثبت سفارش انجام پروژه در سایت و تکمیل فرم، اطلاعات خود را برای ما ارسال می کنید. در این بخش لازم است فایل مورد نظر را برای ما ارسال کنید. اگر چند فایل دارید می توانید از پسوند زیپ استفاده کنید. همچنین لازم است زبان مبداء و زبان مقصد را مشخص کنید.

بررسی سفارش و تعیین قیمت

در مرحله دوم سفارشی که برای ما ارسال کرده اید مورد ارزیابی قرار میگیرد تا هزینه برآورد شود. برآورد هزینه متناسب با شرایطی که در سفارش برای ما ارسال کرده اید انجام خواهد شد و نتیجه در نهایت به شما اطلاع رسانی خواهد شد.

واریز پیش پرداخت و شروع کار

در مرحله سوم قیمت برآورد شده به شما اعلام خواهد شد و در صورت توافق لازم است تا ۵۰ درصد از مبلغ تعیین شده را واریز بفرمایید تا فرایند انجام پروژه شما آغاز گردد. در این مرحله می توانید روند کار خود را از طریق پشتیبان سایت برررسی کنید.

 

تحویل کار و رضایت مشتری

در آخرین مرحله کار شما پس از عبور از بررسی دقیق کارشناسان سایت و بررسی سطح کیفی کار، فایل نهایی برای شما ارسال خواهد شد. هدف نهایی ما لبخند رضایت شما کاربران محترم است که تاکنون رضایت بیشتر از ۹۷ درصد کاربران را به همراه داشته است.

 

پشتیبانی از پروژه های ری اکت نیتیو

شعار اصلی سایت ما حمایت و پشتیبانی از پروژه های انجام شده . ما در زمینه انجام پروژه ری اکت نیتیو همواره سعی کرده ایم از افرادی با تخصص بالا استفاده کنیم. استفاده از افراد با تجربه و متخصص باعث شده تا به جهت حمایت و پشتیبانی از پروژه های انجام شده هیچ گونه مشکلی نداشته باشیم.

اگر پروژه انجام شده مطابق با خواسته شما نبود! که به ندرت در سایت متلب پروژه اتفاق می افتد می توانید درخواست خود را به ما جهت تغییرات و بررسی مجدد اطلاع دهید تا در اسرع وقت پیگیری های لازم انجام شود و تغییرات لازم انجام شود.

ارائه خدمات قوی و پشتیبانی کامل با تیمی باتجربه و متعهد در سایت متلب پروژه.

 

هزینه انجام پروژه های ری اکت نیتیو چقدر است؟

پروژه های ری اکت نیتیو در زمینه های گوناگونی انجام می شود که این امر باعث گستردگی بسیار بالا در پروژه های ارسالی از سوی شما عزیزان می باشد. تعداد بالای پروژه ها در فیلدهای متنوع سبب شده است تا امر قیمت گذاری پروژه های ری اکت نیتیو یک کار کاملا حرفه ای و تخصصی باشد.

از این رو جهت تعیین قیمت پروژه های خود می توانید سفارش مورد نظر را برای ما از طریق لینک ثبت سفارش در همینه صفحه یا از طریق تلگرام و واتساپ ارسال کنید. پس از ارسال پروژه تیم پشتیبانی سایت در اسرع وقت پروژه شما را برای تعیین کارشناس به کارگروه تخصصی شما ارجاع داده و در نهایت پس از ارسال برای کارشناس و استعلام دقیق قیمت، قیمت پروژه به شما اعلام خواهد شد.

 

کاربردها و ویژگی های نرم افزار ری اکت نیتیو

ری اکت نیتیو یکی از جدیدترین متدهای برنامه نویسی روی انواع پلتفرم ها می باشد که قابلیت پیاده سازی روی انواع سخت افزارها می باشد به این صورت که برنامه ای که روی یک بردسخت افزاری نوشته میشود میتوان در جاهای دیگر نیز استفاده کرد به این حالت فرم انعطاف پذیری در برنامه نویسی گفته میشود ری اکت نیتیو با توسعه های سالانه توسط متخصصان به قابلیت های آن افزوده میشود امروزه بسیاری پلتفرم های بزرگ دنیا از روش ری اکت نیتیو برای توسعه ابزارهای خود استفاده میکنند

 

چه مدت زمان خواهد برد تا به درخواست من پاسخ دهید؟

سایت متلب پروژه در بخش پشتیبانی و انجام فوری کار شما بسیار قوی بوده و به صورت ۲۴ ساعت شبانه روز پاسخگوی شما عزیزان خواهد بود. در هر ساعت از شبانه روز که در خواست خود را برای ما ارسال کنید در کمتر از ۱ ساعت درخواست شما مورد بررسی قرار خواهد گرفت.

پس از اینکه پشتیبان سایت پروژه شما را از جهت تعیین مجری مربوطه ارزیابی کند پروژه برای محقق ارسال می گردد. هر زمان که از محقق پاسخ مناسب از لحاظ قیمت و مدت زمان انجام کار دریافت کند بلافاصله شرایط را به شما اطلاع خواهند داد. این روند به صورت کلی بین ۳ ساعت تا ۶ ساعت اتفاق خواهد افتاد. البته با وجه به سرعت بالای ما و تعداد ۲۰۰ مجری متخصص غالبا ظرف مدت ۳ ساعت و کمتر پیگیری انجام می شود

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com


مشاوره در پروژه ری اکت نیتیو

بسیاری از کاربران علاقه مند هستند پروژه ری اکت نیتیو را شخصا خودشان انجام دهند و در بعضی قسمت های انجام پروژه دچار مشکل هستند و نیاز به مشاوره تخصصی دارند تا بتوانند مشکلات را حل کنند.

سایت متلب پروژه برای رفاه حال شما عزیزان خدمات مشاوره تلفنی کاملا رایگان نیز در نظر گرفته تا تمام نیاز های شما پاسخ داده شود و هیچ مشکلی برای پروژه خود نداشته باشید.

 

گارانتی ۲۴ ساعته انجام پروژه ها در تمامی ایام هفته

همه پروژه های ری اکت نیتیو انجام شده در تیم متلب پروژه دارای گارانتی و پشتیبانی هستند. پس از تحویل و رضایت شما از کار، گارانتی پروژه ( که به مدت ۷۲ ساعت می باشد) شروع خواهد شد. این پشتیبانی در ۲۴ ساعت شبانه روز امکان پذیر است و به صورت کاملا رایگان ارائه می شود مجری موظف می باشد در طول مدت پشتبانی به کلیه درخواست ها پاسخ سریع ارائه دهد.

تیم متلب پروژه موظف است که در در طی این یک ۳ روز به درخواست شما پروژه را بازبینی کرده و در صورت بروز مشکل یا تغییرات آن را پشتیبانی نماید. شما در طول انجام پروژه با واحد پشتیبانی در ارتباط هستید و می توانید از روند انجام پروژه مطلع شوید پس نگرانی بایت نتیجه نخواهید داشت. همه چیز زیر نظر شما و به دست متخصصان حرفه‌ای متلب پروژه انجام میپذیرد.

 

به کارگیری برترین متخصصان انجام پروژه

تمامی متخصصان ری اکت نیتیو در مجموعه متلب پروژه از اساتید حرفه ای کشور تشکیل شده اند. آنها در انواع انجام پروژه های نرم افزاری و برنامه نویسی شرکت داشته و میدانند که برای هر پروژه چه نیازمندی هایی داشته باشند. از این رو همکاری با آنان سبب اطمینان و اعتماد از نتیجه خواهد شد. متخصصان ما در این مجموعه همه شرایط نام برده را دارند:

    تسلط کامل بر موضوع
    • مهارت کامل بر نرم افزارهای مورد نیاز
    • مهارت های ارتباط با کاربران
    • متعهد در انجام وظیفانجام پروژه های ری اکت نیتیو (React native)
ری اکت نیتیو چیست؟

ری اکت نیتیو (React native) یک چارچوب جاوا اسکریپت برای نوشتن برنامه های کاربردی تلفن همراه واقعی و بومی برای iOS و Android است.

بر اساس React، کتابخانه جاوا اسکریپت فیس بوک برای ایجاد رابط کاربر، به جای هدف قرار دادن مرورگر،سیستم عامل های تلفن همراه را قرار می دهد.به عبارت دیگر توسعه دهندگان وب اکنون می توانند برنامه های کاربردی موبایل را به راحتی از طریق React که کتابخانه جاوا اسکریپت است و قبلا با آن کار کرده اند و آنرا می شناسند بنویسند و توسعه دهند.

پروژه ری اکت نیتیو

 ری اکت به شما کمک می کند که فرانت (ظاهر) وب سایت و یا اپلیکیشن موبایل ( React Native ) را به راحتی بسازید. به کمک ReactJs می توان کامپوننت هایی آماده ایجاد کرد که قابلیت استفاده مجدد نیز دارند. کامپوننت ها در واقع قطعاتی از ظاهر وب سایت یا اپلیکیشن هستند. برای مثال شما می توانید یک کامپوننت با نام MyInput برای فیلد های ورودی خود بسازید که امکانات سفارشی شده داشته باشد و به جای استفاده از تگ <input /> از تگ <MyInput/> استفاده کنید.

در حال حاظر React یکی از محبوب ترین کتابخانه های جاوا اسکریپتی است و تیم قدرتمندی از آن پشتیبانی می کند.

React Native نیز کتابخانه جاوا اسکریپتی است که به کمک آن می توان برای سیستم عامل های اندروید و آی او اس اپلیکیشن تولید کرد. این اپلیکیشن ها به صورت native اجرا می شوند و در نتیجه سرعت بالایی دارند. برای مشاهده نمونه اپلیکیشن های نوشته شده توسط این کتابخانه می توانید از این لینک استفاده کنید.
پیش نیاز ها

پیش نیاز های یادگیری این کتابخانه جاوا اسکریپت، HTML5 و CSS است. البته ReactJS از HTML استفاده نمی کند و از JSX استفاده می کند. نگران نباشید شما از اطلاعات HTML ای خود می توانید در JSX استفاده کنید. در مقالات بعدی به مرور با این مفاهیم آشنا خواهید شد.

همیارپروژه با داشتن متخصصین با تجربه و کارآمد در حوزه React Native آماده انجام پروژه های صنعتی و سازمانی ری اکت نیتیو شما می باشد.کافی است یکبار اعتماد به ما را امتحان کنید. دوره چی یاد بگیرم؟

    مباحث Hook و Context را آموزش می بینید.
    با کتابخانه React Router آشنا می شوید.
    مبحث Webpack در ری اکت را یاد می گیرید.
    با React Testing آشنا می شوید.
    با React DevTools آشنا می شوید.
    احراز هویت در React را می آموزید.
    در قالب انجام یک پروژه کاربردی بر مباحث مسلط می شوید.

سرفصل های دوره
۱۳ فصل
۱۰۴ جلسه
۱۶ ساعت
۱
مقدمات
۵ قسمت
۰۰:۴۱:۱۹

معرفی
رایگان
۰۵:۲۳

بخش اول - قسمت اول - معرفی و نگاهی دوباره
رایگان
۰۹:۵۷

بخش اول - قسمت دوم - useState
رایگان
۰۸:۰۳

بخش اول - قسمت سوم - useEffect
رایگان
۱۲:۳۴

بخش اول - قسمت چهارم - Rules of Hooks
رایگان
۰۵:۲۲
۲
فصل اول
۵ قسمت
۰۰:۳۸:۱۱
۳
فصل دوم
۳ قسمت
۰۰:۳۹:۵۵
۴
فصل سوم
۴ قسمت
۰۰:۲۱:۵۵
۵
فصل چهارم
۸ قسمت
۰۱:۳۶:۳۱
۶
فصل پنجم
۱۵ قسمت
۰۲:۰۵:۳۳
۷
فصل ششم
۶ قسمت
۰۱:۰۹:۱۱
۸
فصل هفتم
۱۳ قسمت
۰۲:۱۵:۱۹
۹
فصل هشتم
۸ قسمت
۰۰:۵۷:۴۴
۱۰
فصل نهم
۴ قسمت
۰۰:۳۶:۴۳
۱۱
فصل دهم
۲۰ قسمت
۰۲:۳۵:۲۶
۱۲
فصل یازدهم
۵ قسمت
۰۰:۴۳:۵۶
۱۳
فصل آخر
۸ قسمت
۰۱:۲۰:۱۱
آنچه که در فصل اول دوره پروژه محور React گفته شد…

در فصل قبلی با کتابخانه React آشنا شدیم و پس از بررسی مزیت ها و بازار کار React در ایران و جهان، شروع به یادگیری مباحث پایه ای نظیر JSX، Props، States، Events کردیم و در ادامه یاد گرفتیم چگونه فرم ها را در React مدیریت کنیم و در مثال جستجو ی عکس، با ریکوئست دادن و API های برنامه نویسی آشنا شدیم و نحوه استفاده از Redux برای مدیریت state ها را یاد گرفتیم و در نهایت با پروژه ی انتهای فصل، سعی کردیم مباحث تدریس شده را مرور کنیم.
در فصل دوم آموزش React js به چه مباحثی میپردازیم…

    در بخش اول و دوم این فصل، مباحث Hook و Context آموزش داده می شود که بعد از معرفی در React 16.8، بشدت مورد استفاده توسعه دهندگان قرار گرفت.
    React Router یکی از کتابخانه هایی مورد نیاز اکثر پروژه های React هستند و در بخش سوم با این کتابخانه آشنا می شویم و درون پروژه از آن استفاده می کنیم
    از بخش چهارم پروژه نماوا شروع می شود که بشدت در یادگیری شما تاثیر دارد و بعد از پروژه یه سری مباحث دیگر نیز آموزش داده شده است که می تواند مورد نیاز شما یا شرکتی که قصد استخدام شدن آن را دارید باشد مباحثی مثل:
        Webpack
        React Testing
        React DevTools
        احراز هویت در React

نکته
این آموزش در بسته طلایی آموزش برنامه نویسی با جاوا اسکریپت وجود دارد.
پروژه ی دوره (وبسایت نماوا)

با استفاده از مباحثی که در طول ۲ فصل یاد گرفته اید می توانید به راحتی پروژه در سطح Production مثل نماوا را انجام دهید هدف از ارائه این پروژه فهمیدن اهمیت مباحث آموزش داده شد و افزایش اعتماد به نفس کاربران دوره خواهد بود تا بعد از دیدن دوره به راحتی بتوانند پروژه دلخواه خود را انجام دهند.

    سایت نماوا یکی از بهترین سایت های ایرانی نوشته شده با React هست و در این دوره، سعی کردیم بخش های مهم این سایت که مباحث آموزش دارند پیاده سازی کنیم.
    می توانید دمو پروژه را در انتها ویدیو معرفی دوره مشاهده کنید.
        Slider، MovieList، Movie Preview و TopMenu که تقریبا صفحه اصلی سایت را پیاده سازی می کنند.
        صفحه Single Page نماوا هم در یک بخش، آموزش داده می شود.
        در آخر نیز Lists و Search را پیاده سازی می کنیم.

مخاطبین دوره آموزش React js:

    دانشجویان و فارغ التحصیلان رشته های کامپیوتر
    علاقه مندان به یادگیری react
    کسانی که قصد کسب درآمد از این حوزه را دارند
    و…

پیش نیازهای آموزش React js:

    آشنایی مقدماتی با javascript
    گذراندن فصل اول آموزش react

سرفصل های آموزش React js:

    معرفی و دمو

نکته
حتما بخوانید: نقشه راه react | مسیر یادگیری توسعه دهنده حرفه ای ری اکت در سال 2022 + ویدئو
بخش اول:

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

هوک در React

    هوک و نگاه عمیق به ان
    هوک – قسمت ۱ – معرفی و نگاهی دوباره
    هوک – قسمت 2 – useState
    هوک – قسمت 3 – useEffect
    هوک – قسمت 4 – Rules of Hooks
    هوک – قسمت 5 – useReducer
    هوک – قسمت 6 – Custom Hook
    هوک – قسمت 7 – useRef
    هوک – قسمت 8 – useCallback
    هوک – قسمت 9 – useMemo

بخش دوم:‌React Context

    Context – قسمت 1 – معرفی
    هوک – قسمت 2 – useContext
    مدیریت state با استفاده از Context

بخش سوم: React Route

    آموزش React Router – 1 – معرفی
    آموزش React Router – 2 – Url Parameters
    آموزش React Router – 3 –  Nesting Link Not Found
    آموزش React Router – 4 – Redirect

بخش چهارم: ساخت سایت نماوا: Slider

    معرفی پروژه سایت نماوا
    Slider نماوا – قسمت اول – کامپوننت Slider
    Slider نماوا – قسمت دوم – حل مشکل CORS
    Slider نماوا – قسمت سوم – Slider Context
    Slider نماوا – قسمت چهارم – Slider داینامیک
    Slider نماوا – قسمت 5 – Animation
    Slider نماوا – قسمت 6 – Slider Button and Info
    Slider نماوا – قسمت 7 – action button

بخش پنجم: ساخت سایت نماوا: Movie List

    نماوا Movie List – قسمت 1 – Movie Item
    نماوا Movie List – قسمت 2 – Row List
    ماوا Movie List – قسمت 3 – Flickity
    نماوا Movie List – قسمت 4 – Dynamic RowList
    نماوا Movie List – قسمت 5 – Dynamic Home Page
    نماوا Movie List – قسمت 6 – Dynamic Home Page
    نماوا Movie List – قسمت 7 – Item Component in RowList
    نماوا Movie List – قسمت 8 – Lazy Loading
    نماوا Movie List – قسمت 9 – Placeholder for Lazy Loading
    نماوا Movie List – قسمت 10 – Lazy Loading
    نماوا Movie List – قسمت 11 – RowList Refactor
    نماوا Movie List – قسمت 12 –  Refactor
    نماوا Movie List – قسمت 13 –  Exclusive Dubs
    ماوا Movie List – قسمت 14 –  Advertisement Item
    نماوا Movie List – قسمت 15 –  Hover on Movie Item

بخش ششم: ساخت سایت نماوا: Movie Preview

    نماوا Movie Preview – قسمت 1 –  Movie Detail
    نماوا Movie Preview – قسمت 2 –  Action Buttons
    نماوا Movie Preview – قسمت 3 –  Animation
    نماوا Movie Preview – قسمت 4 –  Dynamic Preview
    نماوا Movie Preview – قسمت 5 –  Dynamic Preview
    نماوا Movie Preview – قسمت 6 –  Fix some Bugs

بخش هفتم:‌ساخت سایت نماوا: Single Page

    نماوا Single Page – قسمت 1 –  Singe Page Route
    نماوا Single Page – قسمت 2 –  Dynamic
    نماوا Single Page – قسمت 3 –  getItemUrl
    ماوا Single Page – قسمت 4 –  Top Media
    نماوا Single Page – قسمت 5 –  Trailer
    نماوا Single Page – قسمت 6 –  Movie Info
    نماوا Single Page – قسمت 7 –  Person Item
    نماوا Single Page – قسمت 8 –  Multi Line List
    ماوا Single Page – قسمت 9 –  Multi Line List
    نماوا Single Page – قسمت 10 – Comment
    نماوا Single Page – قسمت 11 – Seasons
    نماوا Single Page – قسمت 12 – Seasons
    نماوا Single Page – قسمت 13 – Seasons

بخش هشتم: ساخت سایت نماوا: List

    نماوا List – قسمت 1 – List
    نماوا List – قسمت 2 – Show More
    نماوا List – قسمت 3 – Show More
    نماوا List – قسمت 4 – Show More
    نماوا List – قسمت 5 – Collections
    نماوا List – قسمت 6 – Collections
    نماوا List – قسمت 7 – Persons
    نماوا List – قسمت 8 – Fix Some bugs

بخش نهم: ساخت سایت نماوا: Top Menu

    نماوا Top Menu – قسمت 1 – Top Menu Animation
    ماوا Top Menu – قسمت 2 – Menu Items
    نماوا Top Menu – قسمت 3 – Dynamic Page
    نماوا Top Menu – قسمت 4 – Dynamic Page

بخش دهم: ساخت سایت نماوا: Search

    نماوا Search – قسمت 1 – Search Box
    نماوا Search – قسمت 2 – Filter Provider
    نماوا Search – قسمت 3 – Filter
    نماوا Search – قسمت 4 – Filter
    ماوا Search – قسمت 5 – Filter Box
    نماوا Search – قسمت 6 – Filter Options
    نماوا Search – قسمت 7 – Range Slider
    نماوا Search – قسمت 8 – Select Filter Options
    نماوا Search – قسمت 9 – Filtered Buttons
    نماوا Search – قسمت 10 – Range Slider Select
    نماوا Search – قسمت 11 – Query String
    نماوا Search – قسمت 12 – Query String
    نماوا Search – قسمت 13 – Search Input
    نماوا Search – قسمت 14 – Fetch Search Item
    نماوا Search – قسمت 15 – Fetch Search Item
    نماوا Search – قسمت 16 – Fetch Search Item
    نماوا Search – قسمت 17 – Fetch Search Item
    نماوا Search – قسمت 18 – Show Search Result
    نماوا Search – قسمت 19 – Filter Box Active
    نماوا Search – قسمت 20 – Build Project

بخش یازدهم: آموزش Webpack

    آموزش Webpack – قسمت 1 – Webpack CLI
    آموزش Webpack – قسمت 2 – Webpack Config
    آموزش Webpack – قسمت 3 – Webpack Loaders
    آموزش Webpack – قسمت 4 – Webpack Plugins
    آموزش Webpack – قسمت 5 – Webpack React

بخش دوازدهم: آشنایی با React Testing

    آموزش React Testing – قسمت 1
    آموزش React Testing – قسمت 2
    آموزش React Testing – قسمت 3
    آموزش React Testing – قسمت 4
    آموزش React Testing – قسمت 5
    آموزش React Testing – قسمت 6

بخش سینزدهم: آموزش ابزار React DevTools

    آموزش ابزار  فرم ها (form) در react

برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید

بریم با یکی از مهم ترین موضوعات react یعنی state ها آشنا بشیم.
اِستیت (state) ها در react

برای دنلود هر ویدئو روی عنوان ویدئو کلیک کنید

خب بریم سراغ رندر شرطی یا همون conditional rendering توی ریکت
رندر شرطی (conditional rendering) در react

برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید

حالا بریم یه مینی پروژه با هم انجام بدیم تا چیزایی که تا الان یاد گرفتیم رو در عمل ازش استفاده کنیم ، میخوایم یه ماشین حساب جمع و چور با هم طراحی کنیم تا به موضوع state ها کامل مسلط بشیم و مطالب جدیدی رو با انجام این مینی پروژه یاد بگیریم.
مینی پروژه ماشین حساب (calculator application)

برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید

حالا بریم سراغ یکی از موضوعات به شدت پرکاربرد و مهم توی ریکت یعنی useEffect ، هوک useEffect یکی از هوک های خیلی پر کاربرد هست توی اپلیکیشن های ریکتی و توی این فصل یه آشنایی مقدماتی باهاش پیدا میکنیم ، و توی فصل های آینده با جزئیات بیشتر کاربرد هاش رو یاد میگیریم با هم.
آشنایی مقدماتی با useEffect در react

برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید

خب حالا بریم با لیست ها توی react و key prop توی لیست ها آشنا بشیم ، list ها توی ریکت یکی از موضوعات خیلی ساده و در عین حال پرکاربرد هستن که توی این فصل یاد میگیرم چطور لیست ها رو توی ریکت مدیریت کنیم.
lists and keys توی react

برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید

یکی از سوالاتی که زیاد پرسیده میشه اینه که چطور میتونیم از bootstrap توی ریکت استفاده کنیم؟ توی این فصل روش اصولی و درستِ استفاده از بوت استرپ توی react و استفاده از پکیج react-bootstrap رو واستون توضیح دادم.
استفاده از پکیج react-bootstrap در react

برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید

خب وقتش رسیده بریم سراغ یکی از مهم ترین فصل های دوره ریکت ، یعنی فصل آمـــــــــــــوزش مقدماتی پکیج react-router-dom ،توی این فصل یه مینی پروژه ساده رو به صورت spa (single page application) پیاده سازی میکنیم.

 فصل بعد از این فصل هم در قالب یه پروژه عملی مباحث پیشرفته ی react-router-dom رو بهتون آموزش میدم.       
آموزش react-router-dom مقدماتی + مینی پروژه

برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید

در مقاله معرفی React با ریکت و ویژگی‌های اولیه آن آشنا شدیم و اینکه برای شروع برنامه نویسی با ریکت نیاز به چه پیش نیازهایی داریم و نمونه‌هایی که با ریکت پیاده سازی شده بودند رو معرفی کردیم. در این مقاله می‌خواهیم نحوه ایجاد یک پروژه با ریکت و اجزای داخلی آن را با هم بررسی کنیم.
برای شروع به کار با هر یک از روش‌های معروف تولید وب اپلیکیشن‌ها به روش SPA، مانند React ، Angular و Vuejs شما باید Node.js را روی سیستم خود نصب کنید. شما می‌توانید براحتی از سایت خود Node.js آن را دانلود کرده و روی سیستم خود نصب کنیدنقش Node.js در React به صورت یک سرور و بستر برای نصب و اجرای پکیجی‌های وابسته و مورد نیاز می‌باشد. با نصب Node.js یک امکان دیگر هم روی سیستم شما نصب می‌شود که معروف به NPM (Node Package Manager) می‌باشد که ما می‌توانیم به کمک NPM براحتی پکیج‌های سمت Front خود را نصب کنیم و نیاز به دانلود دستی و افزودن به پروژه را نداریم. مثلا با یک دستور ساده مانند NPM I Bootstrap شما می‌توانید در مسیر جاری، Bootstrap را به صورت دانلود شده داشته باشید.
پس NPM یا Node Package Manager یک مدیریت کننده پکیج‌ها می‌باشد که در دنیای Front بسیار کاربرد دارد و نقش مهمی دارد. البته NPM یک رقیب بسیار قوی با نام YARM دارد که بعدا شما هم از آن استفاده خواهید کرد. YARM هم یک Package Manager بسیار قوی است که بسیار محبوب و پراستفاده می‌باشد.
پس ما Node.js را روی سیستم خود نصب کردیم. برای اینکه چک کنیم آیا Node.js از قبل روی سیستم ما نصب شده است یا نه، روش‌های مختلفی وجود دارد. یکی از روش‌ها این است که شما در Command Prompt یا همان CMD معروف دستور Node –Version (Dash Dash – – Version) را تایپ و اجرا کنید. اگر ورژنی به شما نمایش داده شد که مشخص می‌شود Node.js از قبل روی سیستم شما نصب شده است. ولی اگر پیغام خطا دریافت کردید باید Node.js را نصب کنید.
نکته مهم در این بخش این است که اگر Node.js از قبل نصب بود ولی ورژن آن قدیمی بود و قبل از ورژن ۱۱ بود، بهتر است ابتدا Node.js فعلی را Uninstall کنید و سپس نسخه جدید را نصب کنید. در تصویر زیر نسخه Node.js نصب شده را مشاهده می‌کنیدپیش نیاز اول که همان Node.js به علاوه NPM بود را آماده کردیم. حالا باید یک Code Editor خوب و سبک داشته باشیم که بتوانیم با آن برنامه خود را بنویسیم. محبوب ترین Code Editor در بین برنامه نویس‌ها در حال حاضر VS Code می باشد که می توانید از سایت خود VS Code دانلود و نصب کنیدپیش نیاز دوم رو هم نصب کردیم. در زمان نصب VS Code توصیه می‌کنم که در مرحله آخر نصب که به شما چند Checkbox نمایش داده می‌شود که شامل افزوده شده Open with Code به منوی کلیک راست روی فولدرها و فایل‌ها می‌باشد را تیک بزنید که براحتی بتوانید فولدر یا فایل مورد نظر را در محیط VS Code باز کنید.
پیش نیازهای مورد نیاز رو برای شروع کار نصب کردیم. حالا موقع ایجاد یک App از نوع React می‌باشد. ما برای ایجاد یک React App می‌توانیم از دو روش زیر استفاده کنیم:

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com


    به کمک Create-React-App
    ایجاد پروژه به صورت مرحله به مرحله به صورت دستی

هر یک از روش‌های بالا مزایا و معایبی دارند. در ابتدای کار توصیه می‌شود که به کمک پکیج Create-React-App پروژه React خود را ایجاد کنید تا درگیر جزئیات اولیه و حواشی ساخت پروژه نشوید. ولی بعد از حرفه‌ای شدن در React سعی می‌کنیم پروژه‌های خود را به صورت مرحله به مرحله خودمان ایجاد کنیم و از کتابخانه Create-React-App استفاده نکنیم.
مزیت کتابخانه Create-React-App سادگی در ایجاد پروژه می‌باشد و برای شما یک Template اولیه و آماده می‌سازد که می‌توانید براحتی آن را توسعه دهید.
ابتدا شما باید پکیج مربوط به Create-React-App را به صورت global (به صورت سراسری و عمومی) نصب کنید. برای این کار در CMD دستور زیر را وارد نمایید:

npm i create-react-app -g

سوئیچ -g همان نصب به صورت global می باشد، یعنی دستورات مربوط به create-react-app در همه مسیرها قابل دسترس می باشد.
بعد از نصب پکیج بالا حالا می‌توانیم اولین پروژه React خود را ایجاد کنیم. بهتر است یک فولدر به نام دلخواه به طور مثال React Projects برای خود در یکی از درایوها (بهتر است در Desktop نباشد) ایجاد کنید. سپس CMD را در مسیر این فولدر (به طور مثال React Projects) باز کنید.
برای باز کردن CMD در مسیر مورد نظر می‌توانید در Address Bar فولدر جاری کلیک کرده و کلمه CMD را تایپ کنید و Enter کنید.مانند تصویر زیر:سپس در Command Prompt ایجاد شده با تایپ دستور زیر می‌توانید یک پروژه React ایجاد کنید.

create-react-app first-app

دستور Create-React-App که مشخص است و First-App نام پروژه و فولدر اصلی پروژه ما خواهد بود که نباید در نام پروژه حروف بزرگ نوشته شود و همه حروف به صورت Lower Case باشد و بین کلمات از Dash استفاده شود.
مدت زمان ایجاد یک پروژه React بستگی به سرعت اینترنت شما و همچنین سخت افزار سیستم مخصوصا هارد دستگاه شما دارد. حوصله کنید پروژه ایجاد شود و سپس ادامه دهید.
یک روش دیگر هم برای ایجاد پروژه به کمک create-react-app وجود دارد که به شکل زیر می‌باشد:

NPX create-react-app first-app

در این حالت که کلمه NPX در ابتدای دستور افزوده شده است، به این شکل است که دیگر شما نیاز به پکیج Create-React-App نخواهید داشت و می‌توانید براحتی و بدون نصب یک پکیج به صورت Global از آن استفاده کنید. مزیت این روش در این است که شما با دستور NPX همیشه آخرین نسخه از آن پکیج را دارید، در حالی که شما وقتی یک پیکج را مخصوصا به صورت Global نصب می‌کنید تا مدت‌ها شاید فراموش کنید آن را بروزرسانی کنید و نسخه‌های جدید آن را نصب کنید.بعد از اجرای این دستور در مسیر فولدر جاری که پوشه React Projects در درایو D سیستم من می‌باشد یک پوشه با نام First-App ساخته می‌شود که همان پروژه React شما می‌باشد.
در React، محتوای یک پروژه در یک فولدر اصلی قرار می‌گیرد که شما باید آن را با ابزار VS Code خود باز کنید و شروع به کدنویسی نمایید.مانند شکل زیربرای دوستانی که تا به حال از نرم افزار VS Code استفاده نکردن شاید در ابتدا (یکی دو هفته اول) براشون محیط سخت و آزاردهنده‌ای باشه ولی به مرور خواهد دید که چقدر راحت، سریع و ساده است و بعد از مدتی حسابی به آن عادت خواهید کرد.
در محیط VS Code و در سمت چپ ما یک منوی عمودی (Sidebar) داریم که در اولین آیتم آن Explorer می‌باشد، که مثل Explorer ویندوز شما در آن می‌توانید فولدرها و فایل‌ها پروژه خود را مشاهده کنید و روی آنها کلیک کرده و باهاش کار کنید. در عکس زیر شما فولدرها و فایل‌های مربوط به پروژه First-App که ساختیم رو مشاهده می‌کنید.سعی می‌کنیم در بخش دوم این مقاله، تک تک آیتم‌ها را به صورت مختصر توضیح دهیم و ببنیم هر کدام چه کاری انجام می‌دهند.
الان می‌خواهیم همین پروژه و Template اولیه که ایجاد شده را اجرا کنیم. برای اجرا پروژه باید یک دستور جدید تایپ و اجرا کنیم. ما برای تایپ و اجرای دستوراتی که تا به حال در محیط CMD وارد می‌کردیم، می‌توانیم براحتی در VS Code در بخش Terminal تایپ کرده و اجرا کنیم.
برای باز کردن یک ترمینال جدید می‌توانید در منوی افقی بالای VS Code روی منوی Terminal کلیک کنید و در منوی باز شده و روی New Terminal کلیک کنید. با این کار در بخش پایین VS Code یک پنجره جدید نمایش داده خواهد شد که همان ترمینال درخواستی شما
آموزش جامع و پروژه محور ری اکت (React)

یکی از کاربردی‌ترین ابرارهایی که برای اپلیکیشن‌های تک صفحه‌ای به منظور مدیریت لایه‌ها استفاده می‌شود، ری‌ اکت می‌باشد.  در این بخش در ارتباط با React مطالبی به شما ارائه خواهم داد. با من همراه باشید.

 
ری اکت چیست؟

React یک کتابخانه‌ی جاوا اسکریپتی است که برای ساخت یوزر اینترفیس یا همان رابط کاربری مورد استفاده قرار می‌گیرد. همه‌ی این آلمان‌های در این صفحه  کنار هم برای ما رابط کاربری را تشکیل می‌دهند. (یوزر اینترفیس (رابط کاربری) چیزی که با کاربر در ارتباط است). کاربرد ری‌اکت این است که یوزر اینترفیس را برای ما با یک سری ویژگی‌های خاص می‌سازد. یکی از مهمترین ویژگی‌ها این است که React  این قابلیت را دارد که برای ما یوزر اینترفیس‌ها یا رابط‌های کاربری را با سرعت بالا بسازد. مسلما سرعت بالای هر وبسایت می‌تواند در جذب کاربر تاثیر بسزایی داشته باشد. پس تا به این جا همان طور که گفتم ری‌اکت یک کتابخانه‌‌ی جاوا اسکریپتی برای ساخت رابط‌های کاربری با سرعت بالا است. اینستاگرام به تنهایی می‌تواند یک وزنه‌ی سنگین برای معرفی ری‌اکت‌نیتیو باشد که از این نوع کتابخانه‌ استفاده می‌کند.

 

ری اکت در کنار دو رقیب

React برای اولین بار در سال ۲۰۱۱ توسط فیس بوک استفاده شد. بعد از آن روز به روز به محدودیت ری‌اکت افزوده شد. فیس بوک شرکت کوچکی نبود و استفاده‌ی فیس‌بوک از ری‌اکت نشان دهنده‌ی این است که  قابلیت بالایی دارد. اگر سری به گوگل ترنس بزنیم و این نوع کتابخانه را در کنار دو رقیبش angular و vue قرار دهیم، می‌بینیم با توجه به قدرتی که این دو رقیب دارند باز هم React پیشتاز است. React برخلاف angular و vue که فریم ورک‌های جاوا اسکریپتی هستند یک کتابخانه است و همین کتابخانه بودنش باعث شده است که اولا خیلی سبک باشد، استفاده از آن آسان و از همه مهم‌تر یادگیری‌اش بسیار راحت است.

 
چرا یادگیری React ساده است؟

چرا که ما فقط قرار است از سینتکس خود از جاوا اسکریپت استفاده کنیم. اگر تا حدودی با جاوا اسکریپت آشنا باشیم می‌توانیم به راحتی از آن استفاده کنیم. یکی از مزایای دیگر این نوع کتابخانه کامپوننت  محور بودن آن  می‌باشد. یعنی همه‌ی آلمان‌های صفحه را داخل یک  کامپوننت قرار می‌دهیم و با کنار هم قرار گرفتن  آنها پروژه‌ی ما شکل می‌گیرد. حسن این کار این است که مدیریت قسمت‌های مختلف پروژه برای ما خیلی آسان می‌شود. هر تغییری بخواهیم در هر لحظه در پروژه انجام بدهیم نیاز به برسی کدهای زیادی نداریم چرا که هر قسمت خودش یک کامپوننت مجزا است  و به راحتی می‌توانیم آن قسمت را پیدا کنیم و تغییر در آن اعمال کنیم.

 

React-native

 
بازار کار React

اگر یک سری به وب سایت‌های کارگاهی بزنیم با یک سرچ ساده بسیاری از آن‌ها را می‌توانیم پیدا کنیم. کمتر در خواستی را می‌بینید که در زمینه‌ی فرانت برنامه‌نویس، اسمی از ری اکت نبرده باشند. همین‌طور با توجه به ویژگی‌هایی که در رابطه با این فریم ورک در ادامه به شما معرفی خواهم کرد، متوجه می‌شوید که React مورد علاقه‌ی شرکت‌های بزرگ است. پس اگر می‌خواهید فرصت‌های شغلی‌تان را در زمینه‌ی فرانت افزایش دهید حتما ری‌اکت را یاد بگیرید و رزومه‌تان را با این کتابخانه‌ی قدرتمند سنگین‌تر کنید.

 
فریم ورک ری‌اکت نسبت به سایر فریم ورک‌های جاوا چه مزیتی دارد؟

از جمله مهم‌ترین خصوصیات فریم ورک ری‌اکت که آن را از سایر فریم ورک‌ها متمایز می‌کند، می‌توان به موارد زیر اشاره کرد:

 
DOM مجازی را سریع‌تر نمایش می‌دهد:

DOM یک مدل و ساختاری است که تمام عناصر HTML درون یک صفحه وب می‌گنجد. در این صفحه المان‌های  HTML  به عنوان اشیاء در نظر گرفته می‌شوند. کمکی که این خصوصیت در روند کار ما می‌کند این است که سرعت توسعه‌ و انعطاف‌پذیری برنامه‌ی ما را افزایش می‌دهد. از همه مهم‌تر هر بار که برنامه تغییر داده شود، کل UI را در DOM مجازی نمایش می‌دهد.

 
 ایجاد اپلیکیشن‌های مرورگر متحرک آسان‌تر

در چند سال گذشته برای طراحی یک صفحه‌ی مرورگر متحرک نیازمند کدهای پیچیده‌ و حلقه‌های HTML مخصوصی بودیم. در ری‌اکت جاوا اسکریپت از افزونه‌ای خاص استفاده شد که این مشکل را حل کرد. چرا که می‌تواند از کدهای خواندنی توسط ماشین پشتیبانی کند و کامپوننت‌ها را درون یک فایل متغر مخصوص ترکیب کند.

 
  JSX یک افزونه‌ی خاص ری اکت

JavaScript Extention  افزونه‌ای مختص به ری‌اکت می‌باشد. این ویژگی به شما کمک می‌کند کدها را مانند کد HTML  بنویسید. این ویژگی را می‌توان از بهترین خصوصیات  فریم ورک ری‌اکت دانست. چرا که کار نوشتن بلوک‌ها را برای توسعه دهندگان خیلی راحت‌تر می‌کند.

 
به کمک ری اکت از داشتن یک کد پایدار مطمئن باشید.

تصور کنید به عنوان یک برنامه‌نویس قصد دارید بخشی از اپلیکشنی که طراحی کردید تغییر دهید. به نظر شما این تغییر چه طور باید صورت بگیرد که تاثیری بر کامپوننت‌های اصلی نداشته باشد؟ در ری‌اکت اطلاعات به سمت پایین منتقل می‌شوند. بنابراین اگر تغییری در کامپوننت‌های زیرمجموعه ایجاد کنید، کامپوننت‌های اصلی ثابت خواهند ماند. شما به عنوان یک برنامه‌نویس قبل از اعمال تغییر باید مطمئن شوید که صرفا بخش مد نظر تغییر می‌کند. که در ری‌اکت داده‌ها با توجه به هدف محدود می‌شوند و درنتیجه پایداری عملکردی اپلیکیشن حفظ خواهد شد.

 
توسعه‌ی اپلیکیشن‌ها به کمک React Native:

کار توسعه‌ی برنامه‌های موبایل با فریم ورک React بسیار راحت‌تر شده است. ری‌اکت نیتیو یک فریم‌ ورک UI متن باز برای طراحی اپلیکیشن موبایل می‌باشد. به نوعی  این نسخه از   react  شرایط استفاده از کدهای وب این فریم ورک را  برای نسخه‌های اندروید و ios را فراهم خواهد کرد.

 

React

 
یادگیری آسان ری اکت

همانطور که در مقدمه اشاره شد، ری‌اکت یک کتابخانه‌ی جاوا اسکریپتی است. بنابراین هر برنامه‌نویسی که با جاوا اسکریپت آشنا باشد به راحتی فریم ورک ری‌اکت را درک خواهد کرد و یاد می‌گیرد.

 
اتصال داده یک طرفه:

به این معناست که یک Software developer برای ایجاد تغییر یک کامپوننت باید از Callback استفاده کند و نمی‌تواند مستقیما آن را ویرایش کند.

 
ری اکت دارای پلتفرم قابل توسعه

برای توسعه‌ی این فریم ورک نیازمند دو ابزار هستیم:
react developer

به کمک این ابزار می‌توانیم ویژگی و حالت تک به تک کامپوننت‌هایی که در یک مجموعه قرار گرفتند برسی کنیم. کمک دوم این ابزار این است که برنامه‌نویس را در تشخیص کامپوننت‌های اصلی و زیرمجموعه راهنمایی می‌کند.
Redux

ریداکس یک نگهدارنده‌ی حالتِ قابل پیش‌بینی برای اپلیکیشن‌های جاوا اسکریپت می‌باشد. به کمک این ابزار اکشن‌های متفاوت قابل مشاهده است. همچنین می‌توان حالت‌های ذخیره‌ شده جاری و تغییرات روی ذخیره‌ها را مشاهده کرد.

 
رابط کاربری اعلانی (Declarative UI)

این ویژگی در کدهای react باعث خوانایی بهتر کمک می‌کند. حتی به راحتی نقص‌های نرم‌افزاری را رفع خواهد کرد. اگر به دنبال یکی از بهترین پلتفرم‌ها برای توسعه‌ی رابط‌های کاربری هستید  فریم ورک  React JS را به شما معرفی می‌کنم. این رابط کاربرد گسترده‌ای دارد چرا که هم برای دسکتاپ و هم برای موبایل قابل استفاده است.

 
معماری عالی React:

در اپلیکیشن‌ها یکی از اصلی‌ترین مواردی که در تعاملات و تبدیل داده‌های خام به اطلاعات قابل مشاهده نقش دارد Component Based می‌باشد. این ویژگی کمک می‌کند تا از المان‌ها متفاوت طبق منطق خود استفاده کند.

 
سئو سایت خود را با ری اکت جی اس ارتقا دهید.

یکی از مواردی که به جذب مشتری بیشتر کمک می‌کند رویت برند آن‌ها در صفحات اول گوگل است. فریم ورک React می‌تواند با استفاده از یک نقطه‌ی اتصال در شبکه ارائه گردد. بر این اساس رباط‌های خرنده‌ی گوگل برنامه‌ی وب را در فرم نهایی خود برسی می‌کنند.  در نتیجه ایندکس شدن مطالب راحت‌تر صورت می‌گیرد.

 
برای یادگیری ری اکت چه پیش‌نیازهایی لازم است؟
۱. مبانی جاوا اسکریپت

React یک کتابخانه‌ی جاوا اسکریپتی است بنابراین از اصلی‌ترین مواردی که باید یاد بگیرید جاوا اسکریپت می‌باشد. در این بخش سعی کنید در این موارد به تسط کافی برسید.

    Scoping
    let و const و
    map  , filter  و
    JSON
    JSX
    DOM

 
۲. برنامه‌نویسی شیء گرا

در این روش برنامه‌نویس بدنه‌ی اصلی توسط اشیا ساخته می‌شوند. به بیان دیگر اطلاعات و توابع در قالب شیء در کنار هم قرار می‌گیرند و یک واحد اصلی را تشکیل خواهند داد. برای درک بهتر  React و React-native  باید با این سبک برنامه‌نویس آشنا باشید.

 
۳. آشنایی با الگوریتم‌ها

الگوریتم، یک روش ساخت یافته و مرحله به مرحله حل مسئله، یک زبان بینابینی بین زبان انسانی و زبان برنامه‌نویسی می‌باشد. الگوریتم کمک می‌کند تا یک مسئله‌ی بزرگ به بخش‌های کوچک تقسیم شوند و خیلی آسان در کمترین زمان ممکن حل شوند. شما به عنوان یک برنامه‌نویس برای موفقیت در کارتان حتما باید بر انواع الگوریتم‌ها تسلط کافی و لازم را داشته باشید.

 

ری اکت
 
۴. آشنایی با Flex

فلکس یک فریم ورک متن باز قوی است که امکان ساخت برنامه های سنتی برای مرورگر، موبایل و دسکتاپ را با استفاده از همان مدل برنامه‌نویسی، ابزار و کد فراهم می سازد. چیدمان صفحات در React-native به کمک Flex صورت می‌گیرد. بنابراین باید در این زمینه به تسلط کافی برسید.

 
۵. آشنایی با API

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com


رابط برنامه‌نویسی نرم‌افزار یا API یکی دیگر از ملزومات React و React-native می‌باشد.

 
در پایان

در این مقاله سعی کردم یکی دیگر از علوم برنامه‌نویسی را به شما معرفی کنم. پیش‌نیازهای یادگیری و کاربرد‌های ری اکت به شما عزیزان ارائه شد. ری‌اکت در چند سال اخیر نقش مهمی در پیشرفت کار خیلی از برندها داشت و بازار کار بسیار مناسبی دارد. اگر علاقه‌منداید در این زمینه فعالیت کنید و امنیت مالی خوبی داشته باشید توصیه می‌کنم آموزش در این حوزه را شروع کنید. تیم قوی و حرفه‌ای کدیاد در خدمت شما عزیزان است تا در این زمینه به تسلط کافی و لازم برسید. برای دریافت آموزش‌ها کافی‌ست به صفحه‌ی اصلی سایت مراجعه کنید.

 

 
سرفصل های دوره
مقدمات و پیش نیازها

نصب پیش نیاز ها و ایجاد اولین پروژه react
۰۰:۱۷:۱۱

افزودن react به وبسایت (به عنوان کتابخانه جانبی) - آشنایی با JSX
۰۰:۲۳:۲۶

گیت و گیت هاب
۰۰:۱۷:۱۳

ES۶ (مفهوم کلاس در جاوااسکریپت)
۰۰:۱۳:۰۶

ES۶ (معرفی let - const - arrow functions)
۰۰:۱۰:۰۷

ES۶ (ماژول نویسی)
منتشرشده ۰۰:۱۳:۱۶
آشنایی اولیه با React

آشنایی با ساخت پروژه ری اکت (ساخت تایمر با react)
منتشرشده ۰۰:۱۲:۵۱

ساخت کامپوننت در react
منتشرشده ۰۰:۱۴:۴۳

استایل دهی در ریکت - state ها در ری اکت
منتشرشده ۰۰:۱۳:۳۹

کامپوننت ها در ریکت
منتشرشده ۰۰:۰۸:۳۱

چرخه حیاط react
منتشرشده ۰۰:۱۱:۴۹

مفهوم props در react و event handling در ری اکت
منتشرشده ۰۰:۱۲:۴۳

ساخت مینی پروژه stopwatch با ری اکت
منتشرشده ۰۰:۱۶:۱۰
مفاهیم اصلی React

ری اکت هوک - react hooks
منتشرشده ۰۰:۱۵:۳۰

هوک useState در React
منتشرشده ۰۰:۱۳:۲۸

مفهوم children در ری اکت و مفهوم key در react
منتشرشده ۰۰:۱۰:۱۸

تکمیل بخش ثبت زمان - spread operator در ES۶
منتشرشده ۰۰:۰۶:۴۶

آشنایی با context در react
منتشرشده ۰۰:۱۷:۳۲

حل تمرین جلسه۱۸ - نکات مهم در ری اکت - Spread Operator در ES۶
منتشرشده ۰۰:۱۵:۵۳

فراخوانی پروژه از GitHub- بهترین راه تماشای آموزش آنلاین
۰۰:۱۸:۲۰

شروع مینی پروژه اپلیکیشن TODO - کامپوننت Fragment
منتشرشده ۰۰:۰۸:۴۲

ادامه مینی پروژه اپلیکیشن TODO - و Object destructuring در ES۶
منتشرشده ۰۰:۱۲:۵۱

ادامه اپلیکیشن TODO - و Conditional Rendering و form
منتشرشده ۰۰:۱۲:۰۲

حل تمرین و تکمیل مینی پروژه TODO
منتشرشده ۰۰:۱۱:۳۵

pure component در react
منتشرشده ۰۰:۱۱:۴۶

مینی پروژه حدث کلمه - ref در ری اکت
منتشرشده ۰۰:۱۷:۳۲

useRef و forwardRef در ری اکت
منتشرشده ۰۰:۱۰:۳۵

معرفی قالب پروژه نهایی
۰۰:۰۶:۰۰

شروع مینی پروژه جدید - استفاده از CSS Modules در react
منتشرشده ۰۰:۱۶:۲۵
آشنایی با React Router

react-router | بخش ۱
منتشرشده ۰۰:۱۱:۲۲

react-router | بخش ۲ - کامپوننت Navigate
منتشرشده ۰۰:۰۷:۵۷

react-router | بخش ۳
منتشرشده ۰۰:۱۱:۲۹

react-router | بخش ۴ (useNavigate و NavLink در ری اکت)
منتشرشده ۰۰:۱۲:۵۷

react-router | بخش آخر (useLocation و sweetalert در ری اکت)
منتشرشده ۰۰:۱۰:۲۹
ارتباط با سمت سرور

معرفی RESTful API
منتشرشده ۰۰:۰۸:۲۳

معرفی و کار با Axios
منتشرشده ۰۰:۱۲:۲۷

مفهوم promise و async - await
منتشرشده ۰۰:۲۲:۱۲

حذف کاربر با متود DELETE با Axios
منتشرشده ۰۰:۰۹:۱۹

افزودن کاربر با متود Post در Axios
منتشرشده ۰۰:۱۴:۱۹

ویرایش کاربر - پیاده سازی سرچ کاربر
منتشرشده ۰۰:۱۶:۱۱

نکات پیشرفته استفاده از Axios
منتشرشده ۰۰:۱۱:۳۸
مفاهیم اصلی React (پیشرفته)

react-portals
منتشرشده ۰۰:۰۸:۲۱

کامپوننت مرتبه بالا - HOC - آشنایی اولیه
منتشرشده ۰۰:۱۰:۳۷

کامپوننت مرتبه بالا - HOC - مثال عملی
منتشرشده ۰۰:۱۶:۱۲

render-props
منتشرشده ۰۰:۱۳:۵۱

نکات مهم هوک ها - previous state در react
منتشرشده ۰۰:۱۲:۵۸

نکات مهم هوک ها - useEffect
منتشرشده ۰۰:۰۹:۳۵

آشنایی با هوک useReducer
منتشرشده ۰۰:۱۰:۵۸

آشنایی با هوک useReducer - بخش دوم
منتشرشده ۰۰:۰۷:۴۱

آشنایی با هوک useReducer - مثال عملی - fetching data
منتشرشده ۰۰:۲۲:۳۹

آشنایی با هوک useCallback
منتشرشده ۰۰:۱۲:۳۳

آشنایی با هوک useMemo
منتشرشده ۰۰:۱۲:۳۳

آشنایی با custom hooks - ساخت هوک شخصی
منتشرشده ۰۰:۱۲:۵۳
React-Redux

آشنایی با redux
منتشرشده ۰۰:۱۰:۰۰

ساخت اولین پروژه ریداکسی - store, dispatch, subscribe
منتشرشده ۰۰:۱۲:۲۰

redux-multi reducer
منتشرشده ۰۰:۰۸:۰۵

آشنایی با react-redux - ساخت اولین پروژه ریداکسی در react
منتشرشده ۰۰:۱۶:۰۹

استفاده از هوک ها در react-redux و multi-reducer در react-redux
منتشرشده ۰۰:۰۷:۰۸

اکستنشن redux devTools به عنوان middleware
منتشرشده ۰۰:۰۷:۵۹

Action payload
منتشرشده ۰۰:۱۰:۲۷

Async action و redux-thunk
منتشرشده ۰۰:۱۸:۱۹

شروع مینی پروژه اپلیکیشن آب و هوا - مدیریت تاریخ شمسی با moment
منتشرشده ۰۰:۱۲:۳۳

تکمیل مینی پروژه اپ آب و هوا با ریداکس
منتشرشده ۰۰:۱۴:۳۴

پیشنیاز redux-saga - آشنایی ES۶-generators
منتشرشده ۰۰:۱۲:۰۶

آشنایی کامل و پیاده سازی Redux-Saga
منتشرشده ۰۰:۱۰:۵۳

multiple_watcher و takeLatest_action
منتشرشده ۰۰:۰۷:۵۴
مدیریت فرم ها با Formik

آشنایی اولیه و ساخت اولین پروژه Formik
منتشرشده ۰۰:۱۳:۰۸

اعتبارسنجی با formik و آشنایی با regex
منتشرشده ۰۰:۱۲:۱۰

اعتبار سنجی با Yup
منتشرشده ۰۰:۱۱:۳۷

استفاده از کامپوننت های Formik
منتشرشده ۰۰:۰۹:۴۹

شخصی سازی کامپوننت های formik
منتشرشده ۰۰:۱۱:۴۴

مدیریت آبجکت ها و آرایه ها در formik
منتشرشده ۰۰:۱۹:۳۳

اعتبارسنجی کامپوننت های formik
منتشرشده ۰۰:۱۲:۱۹

غیرفعال سازی دکمه سابمیت فرم
منتشرشده ۰۰:۱۰:۱۸

اشتفاده از دیتای ذخیره شده در فرم
منتشرشده ۰۰:۱۱:۴۰

ساخت کامپوننت با قابلیت استفاده مجدد
منتشرشده ۰۰:۰۸:۲۸

ساخت کامپوننت های select و radioButton و checkbox
منتشرشده ۰۰:۱۲:۳۰

ساخت فرم ورود شخصی
منتشرشده ۰۰:۱۵:۲۶

ساخت فرم ثبت نام شخصی
منتشرشده ۰۰:۱۳:۴۰

استفاده و ساخت datepicker
منتشرشده ۰۰:۱۵:۱۰

آپلود فایل در formik و اعتبار سنجی فایل با Yup
منتشرشده ۰۰:۱۱:۰۷

معرفی و تست api ثبت نام و لاگین کاربر
منتشرشده ۰۰:۱۳:۴۹

ساخت فرم ثبت نام و ایجاد کاربر جدید
منتشرشده ۰۰:۰۸:۴۷
پروژه پنل مدیریت فروشگاه

ایجاد پروژه اولیه - آشنایی با React ۱۸
منتشرشده ۰۰:۰۹:۰۸

انتقال لایوت پنل ادمین
فاده قرار یگیرد.

اگر هنوز با React Js آشنایی کامل ندارید و تفاوت اون با سایر کتابخونه ها و فریمورک های وب جاوا اسکریپت نمی دونید، پیشنهاد میکنم نگاهی به بخش React بلاگ سایت بندازید و مقالات زیر رو حتما بخونید:

    React Js چیست و چرا ما باید از آن استفاده کنیم
    چرا این روزها React Js محبوبیت زیادی پیدا کرده است
    برای پروژه بعدی کدام یک را انتخاب کنیم؟ React,Angular یا Vue

پس از گذراندن دوره جامع آموزش React چه چیزهایی رو یاد خواهید گرفت ؟

 در این دوره سعی شده است که تمامی مواردی که برای پیاده سازی یک برنامه با React نیاز است به صورت کامل آموزش داده شود و شما بتوانید بعد از گذراندن این دوره به بازار کار وارد شوید.

این آموزش در حال حاضر بر اساس نسخه 16.8.6 ری اکت ارائه شده است و به محض بروزرسانی React به نسخه های جدیدتر،این دوره آموزشی نیز بروز خواهد شد  و شما می توانید پس از خرید دوره به صورت رایگان به آن ها دسترسی داشته باشید.
دوره جامع آموزش React (ری اکت) مناسب چه کسانی است؟

اگه نگاهی به سرفصل های این دوره بندازید متوجه میشید که با کمی تلاش میتونید تقریبا بر روی هر پروژه ای کار کنید و در ReactJs به حد قابل توجه و خیلی خوب برسید  و با اطمینان کامل هر پروژه ای رو قبول کنید.

پس اگه علاقمند هستید  یک برنامه نویس حرفه ای React باشید و هیچ اطلاعات و دانشی در مورد اون ندارید این دوره میتونه بهتون کمک کنه تا از ابتدایی ترین مفاهیم تا پیشرفته ترین مفاهیم رو یاد بگیرید.
تکلیف پیش نیاز های این دوره چی میشه؟

برای یادگیری React شما باید با جاوا اسکریپت (Javascript) و ES6 آشنا باشید و تسلط نسبی داشته باشید تا روند یادگیریتون خیلی سریعتر باشه. لازم نیست که شما برای پیش نیازها نگران باشید چون ما تمامی این پیش نیاز ها رو به صورت رایگان داریم و میتونید از این دوره ها استفاده کنید

    آموزش جاوا اسکریپت
    آموزش ES6

از طرفی همچنین شما نیاز دارید تا با مفاهیم HTML و CSS برای یک خروجی زیبا از لحاظ ظاهری و بصری آشنایی داشته باشید که میتونید از مطالب سایت w3schools استفاده کنید.

جهت آشنایی با دوره و سرفصل ها ، بخش اول آموزش را مشاهده فرمائید .
سوالات متداول
فصل اول : آشنایی بامبانی و مفاهیم اساسی React Js
0.معرفی دوره جامع آموزش React Js ویدئو

4 دقیقه
پیش نمایش
React .1 چیست ویدئو

10 دقیقه
پیش نمایش
در این جلسه به این میپردازیم که React چی هست؟ چرا باید ازش استفاده کنیم؟ آیا React یک کتابخونه است یا فریمورک؟

در ادامه در مورد JSX و Virtual Dom صحبت میکنیم و همچنین چند تا از وب سایت معروف ایرانی که با React نوشته شدن معرفی میشه
2. نصب React ویدئو

7 دقیقه
پیش نمایش
در این جلسه با روش های مختلف نصب React آشنا میشید و در ادامه با استفاده از create react app یک پروژه ایجاد می کنیم

3. بررسی ساختار پروژهای React ویدئو

6 دقیقه
پیش نمایش
در این جلسه ساختار پروژه ای که با create-react-app ایجاد کردیم بررسی می کنیم
4. یادگیری و کار با JSX ویدئو

14 دقیقه
در این جلسه JSX رو به صورت کامل زیر و رو میکنیم و مزایای استفاده از JSX و دردسرهایی که در صورت عدم استفاده از اون رو باید بکشیم به صورت کامل بیان میشه

 

5. Functional Component در مقابل Class Component ویدئو

7 دقیقه
پیش نمایش
در این جلسه  در مورد Functional Component و Class Component صحبت میکنیم.اینکه هر کدوم چه مزایایی دارند و با معرفیhooks چه امکاناتی در اختیار ما قرار گرفته که در پروژه هامون میتونیم ازش استفاده کنیم
6. نحوه ایجاد کامپوننت ویدئو

9 دقیقه
در این جلسه  در مورد نحوه ایجاد یک کامپوننت و استفاده از اون بحث خواهیم کرد و شما یاد میگیرد که چجوری یک Functional Component ایجاد و از اون استفاده کنید

7. props ها در react ویدئو

9 دقیقه
در این جلسه  یاد میگیرد که props ها در react چی هستند؟چه کاربردی دارند و چجوری میشه از اونها استفاده کرد

 

 

 

8. prop types چیست و چه کاربردی دارد ویدئو

14دقیقه
در این جلسه  یاد میگیرد که static typing  و dynamic typing چیه و چه تفاوت هایی با هم دارند سپس در ادامه یاد میگیرد که چجوری type (نوع) prop هایی که به کامپوننت ها پاس داده میشه رو با استفاده از prop types چک کنید و از خطاهایی که ممکن بخاطر type اشتباه prop به وجود بیاد جلوگیری کنید

 

 

9. نحوه تبدیل functional component به class component ویدئو

3دقیقه
در این جلسه  یاد میگیرید که چجوری یک Functional Component رو به Class Component تبدیل کنید

10. state ها در react و کار با useState ویدئو

14 دقیقه
در این جلسه  یاد میگیرید که چجوری با State ها در react کار کنید و اینکه تفاوت بین تعریف و بروز رسانی state ها در class Component و Functional Component چیه و چجوری میشه این عملیات ها رو انجام داد

 

 

 

 

11. استایل دهی در React ویدئو

8 دقیقه
در این جلسه  یاد میگیرید که چجوری با استفاده از فایل های css استایل دهی به element های مورد نظرمون رو انجام بدیم

 

 

12. استفاده از css in js ویدئو

10 دقیقه
در این جلسه  یاد میگیرید که css in js چه مزایایی داره، چه کتابخونه هایی در این زمینه وجود داره و چجوری ازش در React برای استایل دهی استفاده کنید

 

 

 

13. کار با css module ویدئو

8 دقیقه
در این جلسه  یاد میگیرید که چجوری با css module ها در React کار کنید

 

 

 

 

 

14. مدیریت رویدادها(events) ویدئو

10 دقیقه
در این جلسه  یاد میگیرید که چجوری رویدادها یا همون event ها در react رو مدیریت کنید

 

 

 

 

15. conditional rendering در react ویدئو

15دقیقه
در این جلسه  یاد میگیرید که چجوری بر اساس وضعیت یک state یا prop شما render های متفاوتی رو به کاربر نمایش بدید و بر اساس شرط یک سری محتواهای خاص به کاربر نشون داده بشه

 

 

 

16. list و key در react ویدئو

9 دقیقه
در این جلسه در ابتدا  یاد میگیرید که کار map چیه و سپس با list ها کار میکنیم و دلیل و نحوه استفاده از key در لیست ها رو بیان میکنم

 

 

17. کار با فرم ها ویدئو

18 دقیقه
در این جلسه یاد میگیرید که فرم ها در react با html چه تفاوتی دارند و چجوری با فرم ها  در react باید کار کرد

 

 

 

 

18. lifecycle (چرخه حیات) کامپوننت ها و کار با useEffect ویدئو

21دقیقه
در این جلسه یاد میگیرید که به طور کلی life cycle چی هست و در چه مواردی مورد استفاده قرار میگیره.سپس نحوه پیاده سازی اون با استفاده از useEffect رو یاد می گیرید

 

 

 

فصل دوم : ساخت Todo App
19.معرفی فصل دوم ویدئو

5 دقیقه
پیش نمایش
در این جلسه تمامی مواردی که در این فصل یاد خواهید گرفت بیان خواهد شد و شما با مشاهده این قسمت میدونید که قراره چه مواردی در این فصل پیاده سازی بشه
20.ایجاد کامپوننت students ویدئو

9 دقیقه
در این جلسه کامپوننت students رو طراحی و ایجاد می کنیم

21.استفاده از map method برای نمایش لیست دانش آموزان ویدئو

9 دقیقه
در این جلسه یاد می گیرید که چجوری  با استفاده از map اطلاعات مربوط به دانش آموزان رو نمایش بدید

 

22.نحوه بروزرسانی state نام دانش آموزان به صورت همزمان ویدئو

11 دقیقه
در این جلسه یاد می گیرید که چجوری  نام مربوط به هر دانش آموز رو به صورت همزمان برای همه دانش آموزان بروزرسانی کنید.در واقع این تکنیک خیلی کاربردی است و در اکثر برنامه هایی که می نویسید برای شما کاربردی خواهد بود

 

 

23.حذف اطلاعات دانش آموز ویدئو

4دقیقه
در این جلسه یاد می گیرید که چجوری  اطلاعات مربوط به هر دانش آموز رو از لیست حذف کنید

 

 

 

24.طراحی کامپوننت Button ویدئو

11دقیقه
در این جلسه یاد می گیرید که چجوری  یک کامپوننت Button ایجاد کنیم که بتونیم در هر جایی از پروژه از اون استفاده کنیم

 

 

25.پیاده سازی بخش تغییر وضعیت نمایش اطلاعات دانش آموزان ویدئو

7 دقیقه
در این جلسه یاد می گیرید که چجوری  یک Button برای تغییر وضعیت نمایش اطلاعات دانش آموزان ایجاد کنیم تا لیست دانش آموزان به صورت row و column نماش داده شود

 

 

26.ایجاد نوار جستجو(searchBarFilter) ویدئو

12 دقیقه
در این جلسه یاد می گیرید که چجوری  یک نوار جستجو یا searchBarFilter ایجاد کنید که با واردکردن هر کاراکتر درون این نوار لیست دانش آموزان بر اساس نام فیلتر شود

 

 

27.طراحی کامپوننت new Student ویدئو

10 دقیقه
در این جلسه یاد می گیرید که چجوری کامپوننت مربوط به اضافه کردن دانش آموزان رو طراحی کنید

 

 

 

28.اضافه کردن دانش آموز جدید ویدئو

23 دقیقه
در این جلسه یاد می گیرید که چجوری اطلاعات مربوط به بک دانش آموز جدید رو به stateایی که نگهدارنده اطلاعات دانش آموزان است اضافه کنیم

 

 

29.استفاده از prop types برای بررسی کردن props ها ویدئو

10 دقیقه
در این جلسه یاد می گیرید که چجوری با استفاده از props types بیاید  type یا همون نوع props های پاس داده شده به هر کامپوننت رو چک کنید و در صورت اشتباه بودن متوجه بشید که type یک کدوم از prop های که به کامپوننت ها پاس دادید،اشتباه است

 

 

30.کار با higher order component ویدئو

16 دقیقه
در این جلسه یاد می گیرید که higher order component چی هست،چه کاربردی داره و مزایای اون چیه

در ادامه چندین نمونه higher order component ایجاد می کنیم

 

 

 

31.کار با useRef ویدئو

7 دقیقه
در این جلسه یاد می گیرید که چجوری با useRef کار کنید

 

 

 

 

32.اضافه کردن فونت به react ویدئو

4 دقیقه
در این جلسه یاد می گیرید که چجوری font به react اضافه کنید

 

 

 

 

 

فصل سوم : debugging(خطایابی) در react
33.معرفی فصل سوم ویدئو

2 دقیقه
پیش نمایش
در این جلسه تمامی مواردی که در این فصل یاد خواهید گرفت بیان خواهد شد و شما با مشاهده این قسمت میدونید که قراره چه مواردی در این فصل پیاده سازی بشه
34.نحوه خطایابی(debugging) در react ویدئو

12 دقیقه
یکی از مواردی که هر برنامه نویس باید بدونه اینکه چجوری برنامه ای که می نویسه رو خطایابی کنه.در این جلسه شما debugging در react رو یاد خواهید گرفت

 

35.debugging برنامه های react با vs code ویدئو

6 دقیقه
در این جلسه شما debugging برنامه های react با استفاده از vs code رو یاد خواهید گرفت

 

 

36.کار با react developer tools ویدئو

11 دقیقه
در این جلسه یاد می گیرید که با ابزار فوق العاده ای که react در اختیار ما قرارداده کار کنید و تمامی ویژگی های مربوط به این ابزار رو به صورت کامل فراخواهید گرفت

 

 

 

37.Error Boundary ویدئو

15 دقیقه
در برنامه هایی که می نویسیم ممکنه یک سری کدها داشته باشیم که به صورت run Time به مشکل بخورند و fail بشن.در این قسمت یادمیگیریم که چجوری با این نوع error ها رفتار و اون رو مدیریت کنیم

 

 

 

 

فصل چهارم : طراحی UI پروژه
38.معرفی فصل چهارم ویدئو

3 دقیقه
پیش نمایش
در این جلسه تمامی مواردی که در این فصل یاد خواهید گرفت بیان خواهد شد و شما با مشاهده این قسمت میدونید که قراره چه مواردی در این فصل پیاده سازی بشه
39.اضافه کردن headerبه پروژه ویدئو

10 دقیقه
در این جلسه یاد میگیرید که چجوری یک header طراحی کنید و اون رو به پروژه اضافه کنید

 

 

40.اضافه کردن logo ویدئو

6 دقیقه
در این جلسه یاد میگیرید که چجوری با عکس ها در react کار کنید و logo رو به header برنامه اضافه کنید

 

 

 

 

41.اضافه کردن آیتم های منو ویدئو

15 دقیقه
در این جلسه یاد میگیرید که چجوری کامپوننت مربوط به  آیتم های منو رو ایجاد، طراحی و استفاده کنید

 

 

42.ایجاد کامپوننت modal ویدئو

19 دقیقه
در این جلسه یاد میگیرید که چجوری یک کامپوننت modal ایجاد کنید که در همه کامپوننت های برنامه قابل استفاده باشه.

 

 

 

43.show و hide کردن modal با انیمیشن های css ویدئو

7 دقیقه
پیش نمایش
در این جلسه یاد  یاد می گیرید که چجوری با استفاده از انیمیشن های css کامپوننت modal که در جلسه قبلی ایجاد کردیم show و hide بشه

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com


 

 

44.ایجاد کامپوننت backDrop ویدئو

9 دقیقه
در این جلسه یاد  یاد می گیرید که چجوری با ایجاد یک کامپوننت backDrop و با کلیک کردن بر روی اون باعث hiیe شدن modal بشید.

 

 

 

45.ایجاد sideDrawer ویدئو

11 دقیقه
header که قبلا طراحی کردیم در mobile device ها به خوبی نمایش داده نمیشه و آیتم های درون اون به هم ریخته است.در این جلسه یاد خواهید گرفت که چجوری با ایجاد sideDrawer از به وجود اومدن این مشکل جلوگیری کنید

46.حل مشکلات مربوط به sideDrawer ویدئو

15 دقیقه
با ایجاد و اضافه کردن sideDrawrer یک سری مشکلات برای برنامه به وجود میاد و باید یک سری استایل ها عوض بشه.در این جلسه شما نحوه برطرف کردن این مشکلات رو یاد خواهید گرفت

 

47.باز و بسته کردن sideDrawer ویدئو

14 دقیقه
در این جلسه یاد خواهید گرفت که چجوری با کلیک کردن بر روی hamburger icon کامپوننت sideDrawer که قبلا ایجاد کردیم باز بشه و با کلیک کردن بر روی backDrop کامپوننت sideDrawer بسته بشه

 

 

فصل پنجم : آموزش کار با react router
48.معرفی فصل پنجم ویدئو

3 دقیقه
پیش نمایش
در این جلسه تمامی مواردی که در این فصل یاد خواهید گرفت بیان خواهد شد و شما با مشاهده این قسمت میدونید که قراره چه مواردی در این فصل پیاده سازی بشه. به صورت کلی در این فصل react router dom آموزش داده خواهد شد
49.نحوه کار multi page در single page application ها ویدئو

4 دقیقه
در این جلسه یاد خواهید گرفت که multi page در single page application ها به چه شکلی کار می کنند و منطق اون به چه صورتی هست
50.نصب react router ویدئو

14 دقیقه
در این جلسه یاد خواهید گرفت که چجوری پکیج های react router  و react router dom رو نصب کنید و با اون ها شروع به کار کنید

 

 

 

51.اضافه کردن Home Page ویدئو

11 دقیقه
در این جلسه یاد خواهید گرفت که چجوری  ساختار پروژه رو تغییر بدید و یک page جدید مثل home اضافه کنید

 

 

 

52.استفاده از Links برای جایجایی بین صفحات ویدئو

5 دقیقه
در این جلسه یاد خواهید گرفت که چجوری با استفاده از Link بین صفحات جابجا بشید

 

 

53.استفاده از props در react router ویدئو

7 دقیقه
در این جلسه یاد خواهید گرفت که چجوری از props هایی که در react router وجود داره استفاده کنید

 

 

 

 

54.استفاده از withRouter Higher Order Component ویدئو

5 دقیقه
در این جلسه یاد خواهید گرفت که چجوری از withRouter برای دسترسی داشتن به props های react router استفاده کنید

 

 

 

55.استایل دهی به لینک route های active ویدئو

7 دقیقه
در این جلسه یاد خواهید گرفت که چجوری ابه لینک route هایی که active هستند استایل منحصر به فرد بدید

 

 

 

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com


 

56.اضافه کردن page ویرایش اطلاعات دانش آموزان ویدئو

10 دقیقه
در این جلسه یاد خواهید گرفت که چجوری page مربوط به ویرایش اطلاعات دانش آموزان رو به Route ها اضافه کنید

 

 

57.استفاده از پارامترهای ارسالی بین Route ها ویدئو

8 دقیقه
در این جلسه یاد خواهید گرفت که چجوری پارامترهای ارسالی بین Route ها رو extract و استفاده کنید

 

58.استفاده از کامپوننت switch ویدئو

3 دقیقه
در این جلسه یاد خواهید گرفت که کامپوننت switch در react router چه کاربردی دارد و چجوری ازش استفاده کنید

 

 

 

59.استفاده از history method ویدئو

8 دقیقه
در این جلسه یاد خواهید گرفت که چجوری از method های مختلفی که react router در اختیار شما گذاشته استفاده کنید

 

 

60.Redirect کردن کاربران ویدئو

5 دقیقه
در این جلسه یاد خواهید گرفت که چجوری با توجه به فرآیندی که دارید کاربران رو با Redirect کنید

 

 

 

61.استفاده از replace method برای Redirect کردن کاربران ویدئو

3 دقیقه
در این جلسه یاد خواهید گرفت که چجوری با استفاده از replace method کاربران رو در react router به صفحات خاص Redirect کنید

 

 

 

62.مشخص کردن سطح دسترسی کاربران به Route ها ویدئو

7 دقیقه
در این جلسه یاد خواهید گرفت که چجوری سطح دسترسی کاربران به هر route رو مشخص کنید

 

 

63.طراحی 404page ویدئو

4 دقیقه
پیش نمایش
در این جلسه یاد خواهید گرفت فرآیند زمانی که کاربر یک آدرس اشتباه در نوار مرورگر وارد کرد 404 page به کاربر نمایش داده شود، رو پیاده سازی کنید

 

64.lazy loading در react ویدئو

9 دقیقه
در این جلسه یاد خواهید گرفت که lazy loading چی هست؟چه مزایایی داره و چه زمانی باید از اون استفاد کنید

 

 

 

 

 

 

فصل ششم : ارتباط با سرور
65.معرفی فصل ششم ویدئو

3 دقیقه
پیش نمایش
در این جلسه تمامی مواردی که در این فصل یاد خواهید گرفت بیان خواهد شد و شما با مشاهده این قسمت میدونید که قراره چه مواردی در این فصل پیاده سازی بشه.
66. Http Request در React ویدئو

11 دقیقه
در این جلسه یاد می گیرید که http request در React چجوری کار میکنه و سپس API که قراره از اون استفاده کنیم به صورت کامل توضیح داده میشه و در انتها کتابخانه axios نصب خواهد شد

 

 

67. Http Request با axios ویدئو

10 دقیقه
در این جلسه یاد می گیرید که چجوری با استفاده از axios به سرور درخواست بفرستیم و از اطلاعات دریافتی استفاده کنیم

 

 

 

68. تغییر و دستکاری اطلاعات دریافتی از سرور ویدئو

6 دقیقه
گاهی اوقات نیاز پیدا می کنید که اطلاعات دریافتی از سرور رو دستکاری کنید و تغییر دهید.در این جلسه این مورد رو یاد خواهید گرفت

 

69. http request برای ویرایش اطلاعات دانش آموزان ویدئو

8دقیقه
در این جلسه یاد خواهید گرفت چطوری یک درخواست برای ویرایش اطلاعات به سرور بفرستیم

 

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com


 

70. post request با axios ویدئو

5 دقیقه
در این جلسه یاد خواهید گرفت چطوری post request با axios بزنید

 

 

 

 

71. delete request با axios ویدئو

10 دقیقه
در این جلسه یاد خواهید گرفت چطوری delete request با axios بزنید

 

72. مدیریت error ها با axios ویدئو

8 دقیقه
در این جلسه یاد خواهید گرفت چطوری Error هایی که در ازتباط با سرور بهش برمیخورید به صورت local  مدیریت کنید

 

 

 

73. مدیریت error ها به صورت global با axios ویدئو

10 دقیقه
در این جلسه یاد خواهید گرفت چطوری Error هایی که در ازتباط با سرور بهش برمیخورید به صورت global  مدیریت کنید

 

 

 

74. مشخص کردن تنظیمات پیش فرض برای ارتباط با سرور ویدئو

5 دقیقه
پیش نمایش
در این جلسه یاد خواهید گرفت چطوری یک سری config ها رو به صورت پیش فرض قرار دهید تا برای هر درخواست مجبور به set کردن اون نباشید

 

75. ایجاد کامپوننت Spinner ویدئو

4 دقیقه
در این جلسه یاد خواهید گرفت چطوریک کامپوننت Spinner ایجاد کنید تا زمانی که نتیجه از سرور برمی گردد به کاربر یک loader نمایش داده شود

 

 

 

76. ایجاد Higher Order Component برای مدیریت کردن Error ها ویدئو

16 دقیقه
در این جلسه یاد خواهید گرفت چطور یک Higher Order Component برای مدیریت کردن Error ها ایجاد کنید تا با ایجاد هر error یک پیغام مناسب به کاربر نمایش داده شود

 

 

 

77. instance در axios ویدئو

5 دقیقه
در این جلسه یاد خواهید گرفت چطور از ویژگی باحال instance در axios استفاده کنید. در واقع با استفاده از instance  شما میتونید برای یک سری از درخواست های یک config داشته باشید و برای بقیه یک config  دیگه

 

 

 

 

فصل هفتم : نوشتن API
78.معرفی فصل هفتم ویدئو

2 دقیقه
پیش نمایش
در این جلسه تمامی مواردی که در این فصل یاد خواهید گرفت بیان خواهد شد و شما با مشاهده این قسمت میدونید که قراره چه مواردی در این فصل پیاده سازی بشه.
79.ایجاد دیتابیس ویدئو

3 دقیقه
در این جلسه یاد میگیرید که چجوری دیتابیس رو در mySql ایجاد کنید

 

80.اتصال به دیتابیس ویدئو

11 دقیقه
در این جلسه یاد میگیرید که چجوری به دیتابیس متصل بشید و API مربوط به ورود مدیر رو بنویسید

 

 

 

81.ایجاد جدول اطلاعات دانش آموزان در دیتابیس ویدئو

3 دقیقه
در این جلسه یاد میگیرید که چجوری یک جدول در دیتابیس ایجاد کنیم

 

 

 

 

82.نوشتن API مربوط به اضافه کردن دانش آموز جدید ویدئو

8 دقیقه
در این جلسه یاد میگیرید که چجوری API مربوط به اضافه کردن دانش آموز جدید رو با استفاده از زبان PHP بنویسید

 

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com


 

83.نوشتن API مربوط به نمایش اطلاعات دانش آموزان ویدئو

4 دقیقه
در این جلسه یاد میگیرید که چجوری API مربوط به نمایش اطلاعات دانش آموز  رو با استفاده از زبان PHP بنویسید

 

 

 

 

84.نوشتن API مربوط به ویرایش اطلاعات دانش آموزان ویدئو

8 دقیقه
در این جلسه یاد میگیرید که چجوری API مربوط به ویرایش اطلاعات دانش آموزان  رو با استفاده از زبان PHP بنویسید

 

 

 

85.نوشتن API مربوط به حذف اطلاعات دانش آموزان ویدئو

5 دقیقه
در این جلسه یاد میگیرید که چجوری API مربوط به حذف اطلاعات دانش آموزان  رو با استفاده از زبان PHP بنویسید

 

 

 

فصل هشتم : کار با Context Api
86.معرفی فصل هشتم ویدئو

6 دقیقه
پیش نمایش
در این جلسه تمامی مواردی که در این فصل یاد خواهید گرفت بیان خواهد شد و شما با مشاهده این قسمت میدونید که قراره چه مواردی در این فصل پیاده سازی بشه.
87.پیاده سازی captcha ویدئو

18 دقیقه
در این جلسه یاد می گیرید که چجوری کدامنیتی یا همون captcha رو در react پیاده سازی کنید تا از حملات brute force جلوگیری کنید و تفاوت بین انسان و ربات مشخص شود

 

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com


 

88.validate کردن فرم ها ویدئو

12 دقیقه
در این جلسه یاد می گیرید که چجوری فرم هایی که دارید رو Validate کنید تا کاربر اطلاعات رو اشتباه وارد نکنه یا یک فیلد رو به صورت خالی رها کنه و باعث به وجود اومدن مشکلاتی در برنامه بشه

 

 

89.ورود به حساب کاربری ویدئو

14 دقیقه
در این جلسه یاد می گیرید که چجوری یک http request برای login به Api که در فصل قبل نوشتیم بزنیم

 

 

90.چه زمانی نیاز به Context Api داریم ویدئو

9 دقیقه
در این جلسه یاد می گیرید که چه زمانی نیاز دارید که از Context Api یا state manager ها در پروژه های React استفاده کنید و اینکه Context Api چه مزایای داره و چقدر کار ما رو راحت کرده

 

 

91.نحوه کار با Context Api ویدئو

10 دقیقه
در این جلسه یاد می گیرید که چجوری کار با Context Api رو شروع و از اون در React استفاده کنید

 

 

92.بروزرسانی data های موجود در Context ویدئو

7 دقیقه
در این جلسه یاد می گیرید که چجوری data های موجود در Context رو بروزرسانی و مقادیر اون رو تغییر بدید

 

 

 

93.مشخص کردن سطح دسترسی کاربران ویدئو

11 دقیقه
در این جلسه یاد می گیرید که چجوری با استفاده از datat ذخیره شده در context برای بررسی ورود کاربر، اجازه دسترسی به صفحات رو به اون بدید

 

 

 

 

94.پیاده سازی حالت night mode و light mode با استفاده از Context ویدئو

14 دقیقه
در این جلسه یاد می گیرید که چجوری با استفاده از context api حالت night mode و light mode رو به راحتی پیاده سازی کنید

 

 

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com


 

95.کار با useReducer ویدئو

14 دقیقه
در این جلسه یاد می گیرید که چجوری با useReducer کار کنید

 

 

 

 

 

96.کار با localStorage ویدئو

14 دقیقه
در این جلسه یاد می گیرید که چجوری با localStorage کار کنید و اطلاعات مربوط به کاربر login شده رو در localStorage  ذخیره کنید

 

 

 

97.نمایش اطلاعات دانش آموزان با Context Api ویدئو

17 دقیقه
پیش نمایش
در این جلسه یاد می گیرید که چجوری با استفاده از Context Api اطلاعات دانش آموزان رو نمایش بدید

 

 

98.حذف اطلاعات دانش آموزان از دیتابیس با Context Api ویدئو

8 دقیقه
در این جلسه یاد می گیرید که چجوری با استفاده از Context Api اطلاعات دانش آموزان رو از دیتابیس حذف کنید

 

 

 

 

99.ویرایش اطلاعات دانش آموزان ویدئو

19 دقیقه
در این جلسه یاد می گیرید که چجوری  اطلاعات دانش آموزان رو ویرایش کنید

 

 

 

100.اضافه کردن اطلاعات دانش آموزان به دیتابیس ویدئو

8 دقیقه
در این جلسه یاد می گیرید که چجوری با استفاده از Api  اطلاعات یک دانش آموز جدید رو به دیتابیس اضافه کنید

 

 

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com


 

فصل نهم : کار با انیمیشن ها در React
101.معرفی فصل نهم ویدئو

4 دقیقه
پیش نمایش
در این جلسه تمامی مواردی که در این فصل یاد خواهید گرفت بیان خواهد شد و شما با مشاهده این قسمت میدونید که قراره چه مواردی در این فصل پیاده سازی بشه
102. کار با css transition ویدئو

13 دقیقه
در این جلسه یاد میگیرید که چجوری با استفاده از css transition در React js انیمیشن ایجاد کنید
103. کار با css animation ویدئو

12 دقیقه
در این جلسه یاد میگیرید که چجوری با استفاده از css animation در React js انیمیشن ایجاد کنید

104. ترکیب css trnasion و react js ویدئو

16 دقیقه
در این جلسه یاد میگیرید که چجوری  با ترکیب css transition  و  React js کار کنید.

 

105. ترکیب css animation و react js ویدئو

13 دقیقه
پیش نمایش
در این جلسه یاد میگیرید که چجوری  با ترکیب css animation  و  React js کار کنید.

 

فصل دهم: نوشتن تست در React
106. اهمیت تست نویسی ویدئو

8 دقیقه
در این جلسه در مورد اهمیت تست نویسی صحبت میکنیم و انواع نوشتن تست و مزایا و معایب هر کدوم رو بیان میکنیم

 

107. معرفی jest ویدئو

10 دقیقه
در این جلسه به طور کامل jest رو معرفی میکنیم و با استفاده از اون یک تست خیلی کوچیک در جهت آشنایی با نحوه تست نوشتن می نویسیم

 

108. نصب Enzyme و نوشتن تست برای کامپوننت students ویدئو

15 دقیقه
در این جلسه ابتدا Enzyme رو نصب میکنیم و با نحوه کار با اون آشنا می شویم و سپس برای کامپوننت Students تست می نویسیم

 

109. استفاده از sinon ویدئو

8 دقیقه
در این جلسه با استفاده از کتابخونه sinon یک fake function ایجاد می کنیم

 

110. نوشتن تست برای کامپوننت Backdrop ویدئو

10 دقیقه
در این جلسه برای کامپوننت Backdrop تست می نویسیم و با توجه به props که این کامپوننت دریافت میکنه برای هر وضعیت تست رو انجام میدیم

 

 

 

111. استفاده از react-testing-library برای نوشتن تست ویدئو

16 دقیقه
در این جلسه ابتدا کتابخونه react-testing-library رو نصب می کنیم و با استفاده از این کتابخونه تست می نویسیم

 

 

 

112. نوشتن تست برای توابع asynchronous ویدئو

16 دقیقه
در این جلسه برای توابعی که به صورت asynchronous هستند، تست می نویسیم

 

 

 

 

113. نوشتن تست برای CallAPI ویدئو

18 دقیقه
در این جلسه برای کامپوننت های که در اون http request داریم، تست می نویسیم

 

 

 

 

 

فصل یازدهم: deploy پروژه های React بر روی سرور و سرویس لیارا
114. deploy بر روی سرور ویدئو

8 دقیقه
در این جلسه در ابتدا در مورد تنظیمات مورد نیاز برای react router و همچنین تغییرات در فایل package.json صحبت میکنیم سپس از پروژه build میگیرم و در سرور آپلود میکنیم.

 

 

 

 

 

115. deploy بر روی لیارا ویدئو

6 دقیقه
در این جلسه در ابتدا در مورد سرویس لیارا و ویژگی های اون صحبت می کنیم.سپس پروژه رو بر روی سرویس لیارا deploy  میکنیم.

 

 

 

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com


 

 

 

فصل دوازدهم : SSR پروژه های react
116. تفاوت بین CSR و SSR ویدئو

8دقیقه
در این جلسه در مورد تفاوت بین CSR و SSR صحبت میکنیم و تاثیر هر کدوم بر مبحث سئو را مورد برررسی قرار می دهیم.همچنین در پایان نتیجه میگیریم که که CSR و SSR مناسب چه پروژه هایی هستند

 

 

117. ایجاد یک پروژه SSR در React با استفاده از Razzle ویدئو

16دقیقه
در این جلسه در ابتدا به معرفی فریمورک Razzle میپردازیم و توضیح داده میشه که Razzle چقدر کار ما رو برای ایجاد یک پروژه SSR بدون هیچ پیکربندی خاصی ساده میکنه.بعد از ایجاد پروژه به بررسی فایل های ایجاد و محتوای اون می پردازیم

 

 

 

 

118.تبدیل پروژه CSR به SSR با استفاده از فریمورک Razzle ویدئو

14دقیقه
در این جلسه پروژه ای که از ابتدای دوره با هم پیش می بردیم رو با استفاده از Razzle تبدیل به SSR میکنیم

 

 

 

 

فصل سیزدهم : مینی پروژه وب سایت گردشگری
119. معرفی فصل سیزدهم ویدئو

4دقیقه
پیش نمایش
در این جلسه در مورد پروژه ای که قراره در این فصل آماده بشه و مباحثی که به اون پرداخته میشه

صحبت می کنیم
120.ایجاد پروژه ویدئو

5دقیقه
121.نصب کتابخانه react-router-dom ویدئو

7دقیقه
122.ایجاد navbar ویدئو

9دقیقه
123.نمایش logo درون navbar ویدئو

8دقیقه
124.نمایش آیتم های navbar ویدئو

8دقیقه
125.ایجاد کامپوننت Button ویدئو

12دقیقه
126.ایجاد کامپوننت HeroSection ویدئو

10دقیقه
127.نمایش Cards ویدئو

16دقیقه
128. ایجاد کامپوننت Footer ویدئو

6دقیقه
129. طراحی کامپوننت Footer ویدئو

19دقیقه
130. ایجاد صفحه Tourism ویدئو

8دقیقه
131. تکمیل صفحه Tourism ویدئو

19دقیقه
132. ایجاد صفحه Tour ویدئو

16دقیقه
134. ایجاد صفحه ثبت نام ویدئو

14دقیقه
133. نمایش Tour ها ویدئو

11دقیقه
فصل چهاردهم: کار با react router dom ورژن 6
134. معرفی فصل چهاردهم ویدئو

3دقیقه
پیش نمایش
در این جلسه در موردنسخه 6 کتابخانه react router dom و مطالبی که قراره به اون پرداخته بشه

صحبت می کنیم
135. نصب کتابخانه react router dom ویدئو

6دقیقه
136. اضافه کردن Route ها ویدئو

5دقیقه
137.Nested Routes ویدئو

2 دقیقه
138.نمایش لیست invoice ها ویدئو

6 دقیقه
139.اضافه کردن no match route ویدئو

3 دقیقه
140.خواندن پارامترها(reading params) ویدئو

4 دقیقه
141.نمایش اطلاعات invoice انتخابی ویدئو

4 دقیقه
142.اضافه کردن index route ویدئو

3 دقیقه
143.نمایش active link ها ویدئو

5 دقیقه
144.اضافه کردن search param ویدئو

7 دقیقه
145.navigate programmaticlly ویدئو

5 دقی

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

قه
فصل پانزدهم: استفاده از TypeScript در React JS
146. معرفی فصل پانزدهم ویدئو

6دقیقه
پیش نمایش
147. نصب و اضافه کردن Typescript به پروژه ویدئو

3دقیقه
148. بررسی type مربوط به props ها- پارت یک ویدئو

8دقیقه
149. بررسی type مربوط به props ها- پارت دو ویدئو

6دقیقه
150. export گرفتن از type ها ویدئو

8دقیقه
151. literal string type ویدئو

6 دقیقه
152. چک کردن type مربوط به props children ویدئو

5 دقیقه
153. چک کردن type مربوط به props events ویدئو

8 دقیقه
154. چک کردن type مربوط به props events - پارت دو ویدئو

6 دقیقه
155. چک کردن type برای useState ویدئو

3 دقیقه
156. چک کردن type مربوط به props style ویدئو

4 دقیقه
157. چک کردن type مربوط به useState ویدئو

7 دقیقه
158. چک کردن type مربوط به useReducer ویدئو

8 دقیقه
159. useReducer strict action types ویدئو

5 دقیقه
160. چک کردن type مربوط به useContext ویدئو

15 دقیقه
161. چک کردن type مربوط به useRef ویدئو

12 دقیقه
162. چک کردن type مربوط به component props ویدئو

8 دقیقه
163. generic props ویدئو

8 دقیقه
پیش نمایش
164. Template literal and exclude ویدئو

6 دقیقه
محبوب ری اکت که زیر مجموعه شرکت meta open source میباشد، در آخرین آپدیت و بروز رسانی خود راه حل های نسبتا متفاوتی را برای نصب ری اکت پیشنهاد کرده است. با ما باشید تا در ادامه به بررسی تمامی راه حل های نصب ری اکت در نسخه بتا بپردازیم.

در ضمن در انتهای مقاله، آموزش کامل vite را ارایه کرده ایم که آن را از دست ندهید!

چرا ری اکت؟

ری اکت ، کتابخانه ای برای رابط های کاربری وب و نیتیو میباشد که با نو آوری های خود، توانسته است مفاهیم جدیدی در وب مدرن مطرح کرده و هم چنین قابلیت های بدیعی در کدنویسی ایجاد کند.

React به شما این امکان را می‌دهد تا از قطعات مجزا به نام کامپوننت، رابط کاربری بسازید. اجزای React خود را مانند Thumbnail، LikeButton و Video ایجاد کنید. سپس آنها را در کل صفحه‌ها، صفحات و برنامه‌ها ترکیب کنید.

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com


همچنین با امکاناتی نظیر state و props این امکان را دارید که داده های خود را مدیریت کرده و یا آنها را بین کامپوننت ها و یا صفحات پاس کاری کنید!

چه به تنهایی کار کنید و چه با هزاران توسعه‌دهنده دیگر، استفاده از React یکسان است.

ری اکت به نوعی طراحی شده است که به شما امکان می دهد اجزای نوشته شده توسط افراد، تیم ها و سازمان های مستقل را به طور یکپارچه ترکیب کنید.

روش های نصب ری اکت

اگر می‌خواهید یک برنامه جدید یا یک وب‌سایت جدید به طور کامل با React بسازید، توصیه می‌کنیم یکی از چارچوب‌های مبتنی بر React را انتخاب کنید که در جامعه ری اکت محبوب هستند.

نصب ری اکت با روش npm

اولین و قدیمی ترین روش نصب با npm بود که تقریبا امروزه میشود گفت روش منسوخی به حساب میآید.

npm i -g create-react-app
create-react-app parsa

نصب ری اکت با روش npx یا روش CRA

معمولا برای شروع آسان یک پروژه react، از create-react-app یا به طور مخفف CRA استفاده می‌کنیم.

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com

azsoft.ir

09367292276
azsoftir@gmail.com
azsoft.ir
09367292276
09367292276
azsoftir@gmail.com


روش بسیار خوبی که هنوز هم در زمان ویرایش این مقاله کار میکند و به دو روش با serviceWorker و بدون serviceWorker برای شما یک برنامه تستی ری اکت تولید کرده و تمام پیش نیاز های لازم را در اختیارتان قرار میدهد تا بتوانید ادامه مسیر کدنویسی را طی کنید.